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

ord插入gif動圖不動？簡單3步讓它們乖乖動起來！~效果圖先展示一波！~↓↓↓

想知道圖中的狗狗為什么一臉蒙蔽？想要【免費領取268份簡歷模板】？一起看到【文章最后】吧！~↓↓↓

1、Word插入圖片

將圖片導入Word文檔中，發現不動？？不急~我們進行后面簡單的操作~

2、設置圖片格式

修改圖片格式不難，這里和大家分享更快速的方法~

批量設置圖片相同大小：

（1）圖片之間按回車進行分行；

（2）雙擊第一張圖片，右上方【大小】修改【寬度】（一般默認鎖定縱橫比，所以高度可以不修改~）；

（3）剩余圖片分別單擊選中，按F4鍵，就可以快速批量應用相同大小啦！~

設置圖片位置：同樣利用快捷鍵~【Ctrl+E】快速居中！~然后再用F4鍵~

3、Word另存格式

怎樣快速另存為？圖片要保存為什么格式，才會在Word里動起來？

最終答案揭曉！~選中全部圖片，按F12鍵一秒喚出【另存為】對話框！~

【保存類型】選擇【網頁*.htm、*.html】。

打開另存的網頁格式文件~華麗麗的動圖效果如下~↓↓↓

表白美膩的淋淋！?~么么噠！~

哈哈哈原來那只狗狗一臉蒙蔽是因為：主人把雪塊丟到雪地里，它找不到哈哈哈哈哈哈哈嗝！~

贈268份簡歷模板（評論郵箱）

小哥辛苦搜集的簡歷模板，炒雞實用！~這還只是冰山一角！~大家積極點~【評論區留下郵箱】免費拿走268份完整版！~不要辜負小哥的一番心意喲~(＾Ｕ＾)ノ~↓↓↓

識別圖片中的文字，可以使用【捷速OCR文字識別軟件】~

先是Html代碼

一個盒子，盒子里有三個小球

關鍵來了，CSS代碼

盒子的樣式

第一個小球樣式

第二個小球樣式

第三個小球樣式

最后加上動圖元素

效果圖

2020-05-13 11：54

在線咨詢

上一篇：PDF轉HTML格式如何轉？看完這篇你就會了
下一篇：用自己電腦發布一個酷炫的個人網站！（源代碼已準備好）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商