一篇文章教会你使用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?
版權聲明：本文內容由阿里云實名注冊用戶自發貢獻，版權歸原作者所有，阿里云開發者社區不擁有其著作權，亦不承擔相應法律責任。具體規則請查看《阿里云開發者社區用戶服務協議》和《阿里云開發者社區知識產權保護指引》。如果您發現本社區中有涉嫌抄襲的內容，填寫侵權投訴表單進行舉報，一經查實，本社區將立刻刪除涉嫌侵權內容。 與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的一篇文章教会你使用html+css3制作GIF图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 云原生时代，微服务如何演进？
- 下一篇： 如何实现 OpenAPI 多语言 SDK