一篇文章教會(huì)你使用html+css3制作GIF圖
時(shí)間：2023-07-06 08:24:02 | 來源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-07-06 08:24:02 來源：網(wǎng)站運(yùn)營(yíng)
一篇文章教會(huì)你使用html+css3制作GIF圖：【一、項(xiàng)目背景】
生活中經(jīng)常會(huì)見到很多gif圖，那么gif圖到底是什么？GIF是一種位圖。簡(jiǎn)單來說就是通過每一張張靜圖，通過控制它的關(guān)鍵幀，從而達(dá)到靜態(tài)圖動(dòng)起來的效果。
這種GIF圖的效果，也可以用html+CSS3結(jié)合來做。
【二、項(xiàng)目目標(biāo)】
完成GIF圖的制作。
【三、項(xiàng)目分析】
1、分析圖片。打開其中一張圖。
2、可以看到這張圖有45張不一樣動(dòng)作的靜態(tài)圖合成。有點(diǎn)擊屬性。如圖所示：
看到這張照片是7020*156，一共有45幀。高度不變，寬度7020/45幀，就可以把每一幀的內(nèi)容顯示出來。
【四、項(xiàng)目準(zhǔn)備】
1、圖片：準(zhǔn)備自己的喜歡的GIF靜態(tài)長(zhǎng)圖，保存在文件夾。
2、軟件：Dreamweaver。
【五、項(xiàng)目實(shí)現(xiàn)】
1、創(chuàng)建div 存放圖片和文件，添加class屬性。
<body> <div class="box"> <div class="box2"> </div> </div></body>2、添加CSS樣式
1） 設(shè)置box的寬、高、位置、背景顏色。
.box{ width: 300px; height: 300px; background: #ccc; position: absolute; left: 0px; top: 0; }2）加載圖片，設(shè)置寬、高，-webkit-animation動(dòng)畫效果。
.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實(shí)現(xiàn)GIF動(dòng)圖(逐幀動(dòng)畫)
steps(45)表示讓整個(gè)動(dòng)畫在45個(gè)關(guān)鍵幀之間切換。這個(gè)松鼠的圖片中
包含了45幀，所以這里設(shè)置了45。而且我們的動(dòng)畫時(shí)長(zhǎng)是3s，也就是說每一幀
停留1s，這就和普通的GIF動(dòng)圖達(dá)到了一樣的效果。
【六、效果展示】
1、點(diǎn)擊F12運(yùn)行到瀏覽器。
2、點(diǎn)擊圖片，效果如下。
【七、總結(jié)】
1、本項(xiàng)目，就gif圖遇到的一些難點(diǎn)進(jìn)行了分析及提供解決方案。
2、html+css也可以做出網(wǎng)站頁(yè)面的效果，在上面顯示圖片標(biāo)題的地方不能用絕對(duì)定位，于是用的relative定位，這個(gè)地方是布局的核心部分。
3、按照操作步驟，自己嘗試去做。自己實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
4、需要本文源碼的小伙伴，后臺(tái)回復(fù)“
GIF圖”四個(gè)字，即可獲取。
看完本文有收獲？請(qǐng)轉(zhuǎn)發(fā)分享給更多的人IT共享之家入群請(qǐng)?jiān)谖⑿藕笈_(tái)回復(fù)【入群】想學(xué)習(xí)更多Python網(wǎng)絡(luò)爬蟲與數(shù)據(jù)挖掘知識(shí)，可前往專業(yè)網(wǎng)站：
http://pdcfighting.com/想學(xué)習(xí)更多Python網(wǎng)絡(luò)爬蟲與數(shù)據(jù)挖掘知識(shí)，可前往專業(yè)網(wǎng)站：
http://pdcfighting.com/
在線咨詢
