一篇文章教會你使用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/