比如这组图片：
 
 
变成这样的gif动画：
 
是不是很神奇。。。。
 
先看html 、样式。很简单，一个div，然后引入图片。
 
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>动态效果</title>

        <style type="text/css">

            .anim{

                width :200px;

                height : 300px;

                background:url(animl1.jpg) ;

                background-position : 0px 0px;

            }

        </style>

    </head>

    <body>

        <div class="wrapper">

            <div class="anim"></div>

        </div>

     </body>

</html>

再看js：

var anim = document.querySelector(".anim");

var left = 0;

setInterval(function(){

    left +=200;

    if(left==1600){

        left = 0;

    }

anim.style.backgroundPosition = -left+"px 0px";

},100);


这就OK了！ 


 


原理在于background-position（背景图像的起始位置）设置200px的宽度主要是因为这组每一部分宽度为200px，根据background-position的作用，在定义left的偏移量。为什么最后left前面要加上-呢？这组图片是递进关系，随着往右的偏移，背景图片在向左递减。比如background-position：200px 0px；它是以容器的左上角为参考，向左偏移200px，也就成为这样：


 




第一幅图就向左偏移200px，消失在显示范围内了。


然后当它为-1600px时，到达最后一幅图，把left设置0，又重新开始。再根据setInterval()方法，无限循环，就得到了gif动态效果。


 
												


											
用简单的代码让一组静态图片变成gif动画的更多相关文章
	

    
								
  1. mfc显示静态图片最简单的方法
		
    一致都是研究如何调用opencv显示动态图片,但是很多时候在显示图标的时候,都是需要显示静态图片,现在将最简单的方法总结下: 1.添加picture控件 2.添加资源,要求为bmp 3.修改属性 结果 ...
    
		
    2. 
						
  2. 简单的PHP上传图片和删除图片示例代码
		
    分享一例简单的PHP上传图片和删除图片示例代码,很简单,适合初学的朋友参考,用来研究php上传图片还是不错的. 1.php上传图片: <?php if (!empty($_FILES[" ...
    
		
    3. 
						
  3. Android 加载gif图片强大框架(支持预加载、缓存，还支持显示静态图片，一行代码全搞定)
		
    之前项目中没有涉及到显示gif图片的功能,也没有着重研究过,最近项目中要用到显示gif图片,于是就在网上一顿搜,用过之后发现如下几个缺点. 1.加载大的gif图片会出现oom. 2.没有预加载和缓存功 ...
    
		
    4. 
						
  4. 基于FPGA的VGA显示静态图片
		
    终于熬到暑假了,记过三四周的突击带考试,终于为我的大二画上了一个完整的句号,接下来终于可以静心去做自己想做的事情了,前一阵子报了一个线上培训班,学学Sobel边缘检测,之前一直在学习图像处理,但是因为 ...
    
		
    5. 
						
  5. FPGA驱动VGA显示静态图片
		
    一 .前言 本文设计思想采用明德扬至简设计法.VGA是最常见的视频显示接口,时序也较为简单.本文从利用显示屏通过VGA方式显示测试图案及静态图片着手带大家接触图像显示应用,算是为后续VGA显示摄像头采 ...
    
		
    6. 
						
  6. vue-cil和webpack中本地静态图片的路径问题解决方案
		
    1 本地图片动态绑定img的src属性 一般我们在html中或者vue组件文件中引用图片是这样,这是不需要做特别处理的 我们将图片放入assets中或者重新建立个文件夹img什么的都可以,随意- 但是 ...
    
		
    7. 
						
  7. 关于 Cookie-free Domains (为什么将静态图片，js，css存放到单独的域名？)
		
    这篇文章对高性能web开发具有参考性:http://developer.yahoo.com/performance/rules.html 本文主要描述使用裸域名做网站主域名时,如何用子域名做 cook ...
    
		
    8. 
						
  8. vue-cil  和  webpack  中本地静态图片的路径问题解决方案
		
    1.小于8K的图片将直接以base64的形式内联在代码中,可以减少一次http请求. 2.大于8k的呢?则直接file-loader打包, 这里并没有写明file-loader.但是确实是需要安装,否 ...
    
		
    9. 
						
  9. swing实现QQ登录界面1.0（ 实现了同一张图片只加载一次）、（以及实现简单的布局面板添加背景图片控件的标签控件和添加一个关闭按钮控件）
		
    swing实现QQ登录界面1.0( 实现了同一张图片只加载一次).(以及实现简单的布局面板添加背景图片控件的标签控件和添加一个关闭按钮控件) 代码思路分析: 1.(同一张图片仅仅需要加载一次就够了,下 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【转】JAVA错误：The public type *** must be defined in its own file***
			
    出现The public type xxx must be defined in its own file这个问题,是由于定义的JAVA类同文件名不一致.public类必须定义在它自己的文件中. 解决 ...
    
			
    2. 
						
  2. FF D8 FF FE 00 24 47 00转图片
			
    String[] img = "FF D8 FF FE 00 24 47 00 9D 0C 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 F0 0 ...
    
			
    3. 
						
  3. MySQL之排序、分组（五）
			
    一.排序 格式:select * from 表 order by 字段 asc|desc 1.查询所有的商品进行排序(升序asc.降序desc) mysql> select * from pro ...
    
			
    4. 
						
  4. 怎么给PDF去除页眉页脚
			
    PDF文件我们现在都会使用到,但有时需编辑PDF文件的时候,小伙伴们都知道该怎么操作吗,不知道的小伙伴不用担心,今天小编就来跟大家分享一下怎么删除PDF文件的页眉页脚,我们一起来看看下面的文章吧 操作 ...
    
			
    5. 
						
  5. Java中三种代理模式
			
    代理模式 代理(Proxy)是一种设计模式,提供了间接对目标对象进行访问的方式;即通过代理对象访问目标对象.这样做的好处是:可以在目标对象实现的功能上,增加额外的功能补充,即扩展目标对象的功能. 这就 ...
    
			
    6. 
						
  6. 论文阅读笔记五十四：Gradient Harmonized Single-stage Detector（CVPR2019）
			
    论文原址:https://arxiv.org/pdf/1811.05181.pdf github:https://github.com/libuyu/GHM_Detection 摘要 尽管单阶段的检测 ...
    
			
    7. 
						
  7. Nginx下完美解决WordPress的伪静态 (wordpress 迁移后 导致 页面404)
			
    直奔主题 如何设置WordPress在 Nginx下的伪静态 第一步:按照文章名为例,登陆后台按照箭头顺序修改固定连接,点击保存更改 第二步:登陆宝塔面板后台,按照文件路径 找到属于要配置域名的con ...
    
			
    8. 
						
  8. 服务器Nginx 反向代理 其他服务器 8181端口 失败的问题
			
    排查方向: 1. 检查服务器的防火墙 2. 检查安全策略 3. 关掉Nginx 服务器上的安全软件 如360 软件会照成这个问题 来自为知笔记(Wiz)
    
			
    9. 
						
  9. VS挂机移动鼠标代码
			
    #include <time.h> #include <stdio.h> #include <Windows.h> HANDLE ghMutex; //////// ...
    
			
    10. 
						
  10. c/c++再学习：查找算法了解
			
    1.顺序查找 说明:顺序查找适合于存储结构为顺序存储或链接存储的线性表. 基本思想:顺序查找也称为线形查找,属于无序查找算法.从数据结构线形表的一端开始,顺序扫描,依次将扫描到的结点关键字与给定值k相 ...
    
			
    11.