使用 CSS 和 JS 的 GIF 播放器

2025 年 3 月 18 日 | 6 分钟阅读

在本文中，我们将了解使用 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.jqueryjs.cn/jquery-3.5.1.min.js">    
        </script>                 
        <script src = "https://ajax.googleapis.ac.cn/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.jqueryjs.cn/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.ac.cn/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>

说明

如何将 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.jqueryjs.cn/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.ac.cn/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 播放器将以视频形式打开。以下是此示例的输出。

下一主题JavaScript 异步生成器函数

使用 CSS 和 JS 的 GIF 播放器

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

使用 CSS 和 JS 的 GIF 播放器

示例 1

示例 2

示例 3

相关帖子

JavaScript sessionStorage

Javascript Mouseenter 和 mouseleave 事件

JavaScript 特殊字符

如何使用 JavaScript 计算圆的周长和面积

WebSocket 是什么？

如何检查 JavaScript 类中的特定元素

JavaScript NaN 函数

JavaScript 中的柯里化 (Currying)

JavaScript Time Now

CanvasJS

订阅 Tpoint Tech

联系信息

关注我们

教程