一篇文章教会你使用html+css3制作GIF图

简介：一篇文章教会你使用html+css3制作GIF图

【一、项目背景】

生活中经常会见到很多gif图，那么gif图到底是什么？GIF是一种位图。简单来说就是通过每一张张静图，通过控制它的关键帧，从而达到静态图动起来的效果。

这种GIF图的效果，也可以用html+CSS3结合来做。

【二、项目目标】

完成GIF图的制作。

【三、项目分析】

1、分析图片。打开其中一张图。

2、可以看到这张图有45张不一样动作的静态图合成。有点击属性。如图所示：

看到这张照片是7020*156，一共有45帧。高度不变，宽度7020/45帧，就可以把每一帧的内容显示出来。

【四、项目准备】

1、图片：准备自己的喜欢的GIF静态长图，保存在文件夹。

2、软件：Dreamweaver。

【五、项目实现】

1、创建div 存放图片和文件，添加class属性。

<body><div class="box"><div class="box2"></div>  </div>
</body>

2、添加CSS样式

1）设置box的宽、高、位置、背景颜色。

.box{width: 300px;height: 300px;background: #ccc;position: absolute;left: 0px;top: 0;}

2）加载图片，设置宽、高，-webkit-animation动画效果。

.box2{width: 156px;height: 156px;background: url("fox45.png");-webkit-animation:aa 3s steps(45) infinite ;}@-webkit-keyframes aa{100%{background-position: -7020px 0;}}

CSS3 animation属性中的steps实现GIF动图(逐帧动画)

steps(45)表示让整个动画在45个关键帧之间切换。这个松鼠的图片中

包含了45帧，所以这里设置了45。而且我们的动画时长是3s，也就是说每一帧

停留1s，这就和普通的GIF动图达到了一样的效果。

【六、效果展示】

1、点击F12运行到浏览器。

2、点击图片，效果如下。

【七、总结】

1、本项目，就gif图遇到的一些难点进行了分析及提供解决方案。

2、html+css也可以做出网站页面的效果，在上面显示图片标题的地方不能用绝对定位，于是用的relative定位，这个地方是布局的核心部分。

3、按照操作步骤，自己尝试去做。自己实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。

4、需要本文源码的小伙伴，后台回复“GIF图”四个字，即可获取。

看完本文有收获？请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/

原文链接：https://developer.aliyun.com/article/771134?

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

一篇文章教会你使用html+css3制作GIF图相关推荐

html border阴影效果_一篇文章教会你使用html+css3制作炫酷效果
[一.项目背景] 在浏览一些网站的时候,经常会看到很多的炫酷的效果去装饰页面,使它看起来更高端大气一些.比如,艺龙就采用了图片上加载文字,点击图片使把对应的图片放大,使用户清晰,直观的看到内容.这种效 ...
一篇文章教会你创建vue项目和使用vue.js实现数据增删改查
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
python网络爬虫_一篇文章教会你利用Python网络爬虫获取穷游攻略
点击上方"IT共享之家",进行关注回复"资料"可获赠Python学习福利 [一.项目背景] 穷游网提供原创实用的出境游旅行指南.攻略,旅行社区和问答交流平台, ...
list vue 添加数据方法_一篇文章教会你创建vue项目和使用vue.js实现数据增删改查...
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
python爬淘宝app数据_一篇文章教会你用Python爬取淘宝评论数据（写在记事本）
[一.项目简介] 本文主要目标是采集淘宝的评价,找出客户所需要的功能.统计客户评价上面夸哪个功能多,比如防水,容量大,好看等等. [二.项目准备工作] 准备Pycharm,下载安装等,可以参考这篇文章 ...
一篇文章教会你利用Python网络爬虫获取电影天堂视频下载链接
[一.项目背景] 相信大家都有一种头疼的体验,要下载电影特别费劲,对吧?要一部一部的下载,而且不能直观的知道最近电影更新的状态. 今天小编以电影天堂为例,带大家更直观的去看自己喜欢的电影,并且下载下来 ...
一篇文章教会你利用Python网络爬虫实现豆瓣电影采集
点击上方"IT共享之家",进行关注回复"资料"可获赠Python学习福利 [一.项目背景] 豆瓣电影提供最新的电影介绍及评论包括上映影片的影讯查询及购票服务. ...
一篇文章教会你利用Python网络爬虫获取素材图片
点击上方"IT共享之家",进行关注回复"资料"可获赠Python学习福利 [一.项目背景] 在素材网想找到合适图片需要一页一页往下翻,现在学会python就可 ...
一篇文章教会你利用Python网络爬虫获取分类图片
点击上方"IT共享之家",进行关注回复"资料"可获赠Python学习福利 [一.项目背景] 博海拾贝是一支互联网从业者在线教育的团队,扎根于中国教育行业以及互 ...

一篇文章教会你使用html+css3制作GIF图

一篇文章教会你使用html+css3制作GIF图相关推荐

最新文章

热门文章