极客笔记使用CSS和JS的GIF播放器
在本文中，我们将了解使用CSS和JS的GIF播放器。GIF播放器库可以让您像视频播放器一样播放、暂停动画GIF文件。它适用于现代浏览器和IE8+。
以下是使用CSS和JS的各种gif播放器的示例。
示例1
<! DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type"
content = "text/html; charset = UTF-8" />
<title> Example of GIF Player using CSS and JS </title>
<meta name = "description"/>
<meta content = "width=800, initial-scale=1"
name = "viewport" />
<script src = "https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>
<style>
body {
font-family: 'Open Sans', sans-serif;
background: linear-gradient(90deg, blue,yellow);
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
color: #fff;
}
html {
height: 100%;
margin: 0;
width: 100%;
color: #FFF;
background: #000;
}
img.gif {
visibility: hidden;
}
.jsgif {
position: relative;
}
h2 {
font-family: inherit;
font-weight: 800;
color: black;
text-align: center;
letter-spacing: 1px;
font-size: 1.1em;
}
.gifcontrol {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
cursor: pointer;
&:after {
transition: background 0.25s ease-in-out;
position: absolute;
content: " ";
display: block;
left: calc(50% - 25px);
top: calc(50% - 25px);
}
&.loading {
background: rgba(235, 255, 215, 0.75);
&:after {
background: #FF9900;
width: 50px;
height: 50px;
border-radius: 50px;
}
}
&.playing {
&:after {
opacity: 0;
transition: opacity 0.25s ease-in-out;
border-left: 20px solid #FF9900;
border-right: 20px solid #FF9900;
width: 50px;
height: 50px;
box-sizing: border-box;
}
&:hover:after {
opacity: 1;
}
}
&.paused {
background: rgba(129 20 149 / 50%);
&:after {
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 50px;
border-color: transparent #992d2d00 transparent #2c2519;
}
}
transition: background 0.25s ease-in-out;
z-index: 100;
}
</style>
<body>
<div style = "width: 600px; margin: auto; text-align: center; font-family: arial">
<h2> Gif player using CSS and JavaScript </h2>
<img src = 'https://media.giphy.com/media/3o85xnsmXy0UempUKA/giphy.gif' class = 'gif' />
</div>
<script>
var gifElements = document.querySelectorAll('img.gif');
for(var e in gifElements) {
var element = gifElements[e];
if(element.nodeName == 'IMG') {
var supergif = new SuperGif({
gif: element,
progressbar_height: 0,
auto_play: false,
});
var controlElement = document.createElement("div");
controlElement.className = "gifcontrol loading g"+e; supergif.load((function(controlElement) {
controlElement.className = "gifcontrol paused";
var playing = false;
controlElement.addEventListener("click", function(){
if(playing) {
this.pause();
playing = false;
controlElement.className = "gifcontrol paused";
} else {
this.play();
playing = true;
controlElement.className = "gifcontrol playing";
}
}.bind(this, controlElement));
}.bind(supergif))(controlElement));
var canvas = supergif.get_canvas();
controlElement.style.width = canvas.width+"px";
controlElement.style.height = canvas.height+"px";
controlElement.style.left = canvas.offsetLeft+"px";
var containerElement = canvas.parentNode; containerElement.appendChild(controlElement);
} }
</script>
</body>
</html>
解释:
在上面的示例中，我们使用CSS和JavaScript创建了一个GIF播放器的示例。在这个示例中，我们看到了如何使用纯CSS将一个GIF文件覆盖，并用播放按钮代替播放。
如何将您的gif文件嵌入文档中
<div class = " example">
<img src = "gif.gif">
</div>
输出：
以下是这个示例的输出结果。
示例2
<! DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type"
content = "text/html; charset=UTF-8" />
<title> Example of GIF Player using CSS and JS </title>
<meta name = "description"/>
<meta content = "width=800, initial-scale=1"
name = "viewport" />
<script src =
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script src =
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>
<style>
body {
font-family: 'Open Sans', sans-serif;
background: linear-gradient(10deg, blue, yellow);
margin: 20;
padding: 20;
font-family: "Montserrat", sans-serif;
color: #fff;
}
html {
height: 100%;
margin: 0;
width: 100%;
color: #FFF;
background: #000;
}
* {
box-sizing: border-box;
}
h3 {
font-family: inherit;
font-weight: 700;
color: red;
text-align: center;
letter-spacing: 1px;
font-size: 1.1em;
}
h2 {
font-family: inherit;
font-weight: 700;
color: red;
text-align: center;
letter-spacing: 1px;
font-size: 1.1em;
}
.gif {
visibility: hidden;
}
#playing:checked {
~ .gif {
visibility: visible;
}
~.btn-play {
display: none;
}
~.btn-stop {
display: block;
} } }
.btn {
display: block;
width: 100%;
padding: 1rem 1.6rem;
border-top: 1px solid white;
font-family: Arial, sans-serif;
color: white;
cursor: pointer;
&:hover {
background-color: #444;
}
&.btn-stop {
display: none;
.icon-stop {
font-size: 135%;
line-height: 1px;
}
}
}
</style>
<body>
<div class = "player-container">
<input type = "checkbox" id = "playing" />
<img class = "gif" src = "https://media.giphy.com/media/3o85xnsmXy0UempUKA/giphy.gif">
<label class = "btn btn-stop" for = "playing"> <span class = "icon-stop"> ■ </span> Stop </label>
<label class = "btn btn-play" for = "playing"> ► Play </label>
</div>
<script>
var controlElement = document.createElement("div");
controlElement.className = "gifcontrol loading g"+e; supergif.load((function(controlElement) {
controlElement.className = "gifcontrol paused";
var playing = false;
controlElement.addEventListener("click", function(){
if(playing) {
this.pause();
playing = false;
controlElement.className = "gifcontrol paused";
} else {
this.play();
playing = true;
controlElement.className = "gifcontrol playing";
}
}.bind(this, controlElement));
}.bind(supergif))(controlElement));
var canvas = supergif.get_canvas();
controlElement.style.width = canvas.width+"px";
controlElement.style.height = canvas.height+"px";
controlElement.style.left = canvas.offsetLeft+"px";
var containerElement = canvas.parentNode; containerElement.appendChild(controlElement);
} }
</script>
</body>
</html>
解释：
在上面的示例中，我们使用CSS和JavaScript创建了一个gif播放器的示例。我们在纯CSS中进行了一个快速实验，将GIF覆盖为播放按钮而不是播放它。
如何将您的gif文件嵌入文档中
<div class = "example">
<img src = "gif.gif">
</div>
输出：
以下是此示例的输出结果。
示例 3
<! DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type"
content = "text/html; charset=UTF-8" />
<title> Example of GIF Player using CSS and JS </title>
<meta name = "description"/>
<meta content = "width=800, initial-scale=1"
name = "viewport" />
<script src =
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script src =
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>
<style>
body {
font-family: 'Open Sans', sans-serif;
background: linear-gradient(70deg, blue, yellow);
margin: 10;
padding: 10;
font-family: "Montserrat", sans-serif;
color: #fff;
}
html {
height: 100%;
margin: 0;
width: 100%;
color: #FFF;
background: #000;
}
* {
box-sizing: border-box;
}
h3 {
font-family: inherit;
font-weight: 700;
color: red;
text-align: center;
letter-spacing: 1px;
font-size: 1.1em;
}
h2 {
font-family: inherit;
font-weight: 700;
color: red;
text-align: center;
letter-spacing: 1px;
font-size: 1.1em;
}
label.clickgif {
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -256 1792 1792"> <path d="M1288.678 637.83q0 37-33 56l-512 288q-14 8-31 8t-32-9q-32-18-32-55v-576q0-37 32-55 31-20 63-1l512 288q33 19 33 56zm128 0q0-104-40.5-198.5t-109.5-163.5q-69-69-163.5-109.5t-198.5-40.5q-104 0-198.5 40.5t-163.5 109.5-163.5t40.5-198.5zm256 0q0 209-103 385.5t-279.5 279.5q-176.5 103-385.5 103t-385.5-103q-176.5-103-279.5-279.5t-103-385.5q0-209 103-385.5t279.5-279.5q176.5-103 385.5-103t385.5 103q176.5 103 279.5 279.5t103 385.5z" fill=?grey"/> </svg>') grey no-repeat center center;
display: block;
float: left;
}
label.clickgif:hover {
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns= "http://www.w3.org/2000/svg" viewBox= "0 -256 1792 1792"> <path d="M1288.678 637.83q0 37-33 56l-512 288q-14 8-31 8t-32-9q-32-18-32-55v-576q0-37 32-55 31-20 63-1l512 288q33 19 33 56zm128 163.5q69 69 163.5 109.5t198.5 40.5q104 0 198.5-40.5t163.5-109.5q69-69 109.5-163.5t40.5-198.5zm256 0q0 209-103 385.5t-279.5 279.5q-176.5 103-385.5 103t-385.5-103q-176.5-103-279.5-279.5t-103-385.5q0-209 103-385.5t279.5-279.5q176.5-103 385.5-103t385.5 103q176.5 103 279.5 279.5t103 385.5z" fill=?seagreen"/> </svg>') grey no-repeat center center;
display: block;
float: left;
}
label.clickgif:focus-win {
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns= "http://www.w3.org/2000/svg" viewBox= "0 -256 1792 1792"> <path d="M1288.678 637.83q0 37-33 56l-512 288q-14 8-31 8t-32-9q-32-18-32-55v-576q0-37 32-55 31-20 63-1l512 288q33 19 33 56zm128 163.5q69 69 163.5 109.5t198.5 40.5q104 0 198.5-40.5t163.5-109.5q69-69 109.5-163.5t40.5-198.5zm256 0q0 209-103 385.5t-279.5 279.5q-176.5 103-385.5 103t-385.5-103q-176.5-103-279.5-279.5t-103-385.5q0-209 103-385.5t279.5-279.5q176.5-103 385.5-103t385.5 103q176.5 103 279.5 279.5t103 385.5z" fill=?seagreen"/> </svg>') grey no-repeat center center;
display: block;
float: left;
}
.clickgif img { display: block; }
.clickgif input[type=checkbox] {
position: absolute;
left: -100vw;
}
.clickgif input[type=checkbox] {
position: absolute;
left: -100vw;
}
.clickgif input[type=checkbox] + img {
opacity: 0;
}
.clickgif input[type=checkbox]:checked + img {
opacity: 1;
}
</style>
<body>
<h2> Example </h2>
<h3> GIF Player using CSS </h3>
<label class = "clickgif" title = "click to show gif">
<input type = "checkbox">
<img src = "https://media.giphy.com/media/XV74ZvGRXcZdS/source.gif" alt = " animated">
</label>
</body>
</html>
解释：
在上面的示例中，我们使用CSS创建了一个GIF播放器的示例。
输出：
在这个示例中，我们通过纯CSS的快速实验展示了如何用一个播放按钮覆盖GIF而不是播放它。
在点击播放按钮后，gif播放器以视频形式打开。以下是此示例的输出。
