整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
一、项目背景】
生活中经常会见到很多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/
ord插入gif动图不动？简单3步让它们乖乖动起来！~效果图先展示一波！~↓↓↓
想知道图中的狗狗为什么一脸蒙蔽？想要【免费领取268份简历模板】？一起看到【文章最后】吧！~↓↓↓
将图片导入Word文档中，发现不动？？不急~我们进行后面简单的操作~
修改图片格式不难，这里和大家分享更快速的方法~
批量设置图片相同大小：
（1）图片之间按回车进行分行；
（2）双击第一张图片，右上方【大小】修改【宽度】（一般默认锁定纵横比，所以高度可以不修改~）；
（3）剩余图片分别单击选中，按F4键，就可以快速批量应用相同大小啦！~
设置图片位置：同样利用快捷键~【Ctrl+E】快速居中！~然后再用F4键~
怎样快速另存为？图片要保存为什么格式，才会在Word里动起来？
最终答案揭晓！~选中全部图片，按F12键一秒唤出【另存为】对话框！~
【保存类型】选择【网页*.htm、*.html】。
打开另存的网页格式文件~华丽丽的动图效果如下~↓↓↓
表白美腻的淋淋！❤~么么哒！~
哈哈哈原来那只狗狗一脸蒙蔽是因为：主人把雪块丢到雪地里，它找不到哈哈哈哈哈哈哈嗝！~
小哥辛苦搜集的简历模板，炒鸡实用！~这还只是冰山一角！~大家积极点~【评论区留下邮箱】免费拿走268份完整版！~不要辜负小哥的一番心意哟~(＾Ｕ＾)ノ~↓↓↓
识别图片中的文字，可以使用【捷速OCR文字识别软件】~
2020-05-13 11：54
*请认真填写需求信息，我们会在24小时内与您取得联系。
