一篇文章教会你使用html+css3制作GIF图
【一、項(xiàng)目背景】
生活中經(jīng)常會(huì)見(jiàn)到很多gif圖，那么gif圖到底是什么？GIF是一種位圖。簡(jiǎn)單來(lái)說(shuō)就是通過(guò)每一張張靜圖，通過(guò)控制它的關(guān)鍵幀，從而達(dá)到靜態(tài)圖動(dòng)起來(lái)的效果。
???這種GIF圖的效果，也可以用html+CSS3結(jié)合來(lái)做。
【二、項(xiàng)目目標(biāo)】
完成GIF圖的制作。
【三、項(xiàng)目分析】
1、分析圖片。打開(kāi)其中一張圖。
2、可以看到這張圖有45張不一樣動(dòng)作的靜態(tài)圖合成。有點(diǎn)擊屬性。如圖所示：
看到這張照片是7020*156，一共有45幀。高度不變，寬度7020/45幀，就可以把每一幀的內(nèi)容顯示出來(lá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)畫(huà)效果。
.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)畫(huà))
steps(45)表示讓整個(gè)動(dòng)畫(huà)在45個(gè)關(guān)鍵幀之間切換。這個(gè)松鼠的圖片中
包含了45幀，所以這里設(shè)置了45。而且我們的動(dòng)畫(huà)時(shí)長(zhǎng)是3s，也就是說(shuō)每一幀
停留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ì)有各種各樣的問(wèn)題，切勿眼高手低，勤動(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ò)爬蟲(chóng)與數(shù)據(jù)挖掘知識(shí)，可前往專(zhuān)業(yè)網(wǎng)站：http://pdcfighting.com/
原文鏈接：https://developer.aliyun.com/article/771134?
版權(quán)聲明：本文內(nèi)容由阿里云實(shí)名注冊(cè)用戶自發(fā)貢獻(xiàn)，版權(quán)歸原作者所有，阿里云開(kāi)發(fā)者社區(qū)不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。具體規(guī)則請(qǐng)查看《阿里云開(kāi)發(fā)者社區(qū)用戶服務(wù)協(xié)議》和《阿里云開(kāi)發(fā)者社區(qū)知識(shí)產(chǎn)權(quán)保護(hù)指引》。如果您發(fā)現(xiàn)本社區(qū)中有涉嫌抄襲的內(nèi)容，填寫(xiě)侵權(quán)投訴表單進(jìn)行舉報(bào)，一經(jīng)查實(shí)，本社區(qū)將立刻刪除涉嫌侵權(quán)內(nèi)容。 與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的一篇文章教会你使用html+css3制作GIF图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 云原生时代，微服务如何演进？
- 下一篇： 如何实现 OpenAPI 多语言 SDK