html5实现GIF图效果

代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 180px;
                height: 300px;
                margin: 50px auto;
                overflow: hidden;
                
            }
            .run{
                width: 180px;
                height: 300px;                
                background: url(images/images/charector.png) no-repeat ;//图片素材自己找。。。
                -webkit-animation:run 700ms steps(7) infinite;
            }
            @-webkit-keyframes run{
                from{
                    background-position: 0 0;
                }
                to{
                    background-position: -1260px 0;
                }
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="run">
                
            </div>
            
        </div>
    </body>
</html>

本文转载自:http://www.cnblogs.com/qingxh/archive/2016/12/12/6164083.html

时间: 2024-10-06 14:02:10

html5实现GIF图效果的相关文章

Html5如何快速在页面中写出多个轮播图效果

我们在做项目的过程中,有时候客户需求要求你在同一个页面中,写几个不同样式的轮播图效果,那么如何快速实现呢?(要知道若果你每个轮播图都要用原生javascript写的话,会很麻烦,代码也不够简洁) 这里我们就可以借助插件来实现这一功能,swiper.js就是一个专门处理轮播图效果的js库,下面举例来说明: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g

js实现轮播图效果(附源码)--原生js的应用

1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Author" content="奇客艺术"> <meta name="keyword" content="关键字"> <meta name=

【学习ios之路:UI系列】实现轮播图效果(UIImageView,UIScrollView,UIPageControl,NSTimer相结合)

实现效果,在不点击的情况下,自定滚动,点击时,停止.如下图 部分代码如下: //调用NSTimer方法,自定计时 - (void)autoScroll { self.timer = [NSTimer scheduledTimerWithTimeInterval:1.5 target:self  selector:@selector(scrollToRight) userInfo:nil repeats:YES]; } //实现触发方法 - (void)scrollToRight { [UIVie

AngularJS:实现轮播图效果

要实现这个功能,可以https://github.com/sroze/ngInfiniteScroll这个第三方控件实现的.实现步骤如下: 1. 下载ng-infinite-scroll.js程序http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.0 2. 如果你是用的jQuery2.0以上版本,还需要修改ng-infinite-scroll.js程序,将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改为$(

花瓣网轮播图效果

没有加上定时器效果,仅仅能手动进行图片的切换 效果图: index.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>index</title> &

如何增强ArcGIS插值图出图效果

by 李远祥 在一些科研领域,经常会遇到使用插值的方式进行处理,并生成最终的插值图.插值图在ArcGIS里面非常容易生成,只要具备了采用点数据,通过ArcToolBox里面的插值的工具可以直接生成最终的插值数据.插值的方法有很多种,这里就不做介绍了.数据生成后,其地图制作也是相当的简单,只需要在符号系统的标签里面设置一下,并进行重分类,使用色带去渲染就可以完成.下图去掉一些地图的整饰元素,直接使用最原始的栅格渲染方式进行出图. 尽管这个图按照笔者的经验,将研究区域的边界加上去,并且标红,加入一些

HTML5实现刮奖效果

原文:HTML5实现刮奖效果 要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果.而HTML5的canvas API中有一个属性globalCompositeOperation,这个属性有多个值,而实现刮奖效果要用到的值就是destination-out.意思就是:在已有内容和新图形不重叠的地方,已有内容保留,所有其他内容成为透明.这样可能不好理解,后面实现的时候会解释.有了globalCompositeOperation这个属性,实现过程就很简单了. 我们需要有两个

开发路程(14):背景图片移动插件MyFloatingBg(浮动背景图效果,可让背景随着页面的滚动而滚动)

MyFloatingBg这插件可以帮助你在网页上加入可移动背景Background.你可以用于整个文件的背景,或是某几个banner的背景. 它可支持简单的animation效果,你不用去做一个flash文件或动态gif图片.单靠jquery和图片,你便可以做出不同的效果.由于我们把动画效果跟内容分开,我们也可以随时更改文字等内容,而不影响其运作.这个效果很是大气,我想可以使用在高级餐厅,珠宝展会等中做展示用. 1 <!doctype html> 2 <html lang="e

JavaScript学习——实现首页轮播图效果

1.相关技术 获取元素 document.getElementById("id 名称") 事件(onload) 定时操作:setInterval("changeImg()",3000); 2.步骤分析(此案例轮播图效果是基于HTML&CSS--使用DIV和CSS完成网站首页重构实现的) 事先准备三张一样大小的图片(img1.img2.img3)放在文件夹Img下. 第一步:确定事件(onload)并为其绑定一个函数 第二步:书写绑定的这个函数 第三步:书写定