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

上面gif動圖所示，這是一個很炫酷的文字動畫效果，文字的每個字符呈波浪式的擴散式展開。本次文章將解讀如何實現這個炫酷的文字效果。

基于以上的截圖效果可以分析出以下是本次要實現的主要幾點：

文案呈圓環狀擴散開，擴散的同時文字變小
文字之間的間距從中心逐個擴散開，間距變大
文案呈圓環狀擴散開，擴散的同時文字變大
文字之間的間距從中心逐個聚攏，間距變小
動畫重復執行以上4個步驟

實現過程

核心代碼實現需要基于以下兩個庫：

Letterize.js是一個輕量級的JavaScript庫，它可以將文本內容分解為單個字母，以便可以對每個字母進行動畫處理。這對于創建復雜的文本動畫效果非常有用。
使用Letterize.js，你可以輕松地將一個字符串或HTML元素中的文本分解為單個字母，并為每個字母創建一個包含類名和數據屬性的新HTML元素。這使得你可以使用CSS或JavaScript來控制每個字母的樣式和動畫。

anime.js是一個強大的JavaScript動畫庫，它提供了一種簡單而靈活的方式來創建各種動畫效果。它可以用于HTML元素、SVG、DOM屬性和JavaScript對象的動畫。

通過使用Letterize.js以便可以對每個字母進行動畫處理，再結合anime.js即可創建各種動畫效果。本文不對這兩個庫做更多的詳細介紹，只對本次特效實現做介紹，有興趣的可以看看官網完整的使用文檔。

界面布局

html就是簡單的本文標簽，也不需要額外的樣式，只需要在外層使用flex布局將內容居中，因為本文的長度都是一樣的，所以完成后的文本內容就像一個正方形。

<div>
      <div class="animate-me">
        letterize.js&anime.js
      </div>
      <div class="animate-me">
        anime.js&letterize.js
      </div>
      ......
      <div class="animate-me">
        letterize.js&anime.js
      </div>
      <div class="animate-me">
        anime.js&letterize.js
      </div>
    </div>

動畫實現

初始化 Letterize.js，只需要傳入 targets 目標元素，元素即是上面的 .animate-me 文本標簽。返回的 letterize 是包含所有選中的 .animate-me 元素組數。

const letterize = new Letterize({
  targets: ".animate-me"
});

接下來初始化 anime 庫的使用，下面的代碼即創建了一個新的anime.js時間線動畫。目標是Letterize對象的所有字母。動畫將以100毫秒的間隔從中心開始，形成一個網格。loop: true 動畫將無限循環。

const animation = anime.timeline({
  targets: letterize.listAll,
  delay: anime.stagger(100, {
    grid: [letterize.list[0].length, letterize.list.length],
    from: "center"
  }),
  loop: true
});

開始執行動畫，首先設置「文案呈圓環狀擴散開，擴散的同時文字變小」，這里其實就是將字母的大小縮小。

animation
  .add({
    scale: 0.5
  })

此時的效果如下所示：

繼續處理下一步動畫，「文字之間的間距從中心逐個擴散開，間距變大」，這里處理的其實就是將字母的間距加大，通過設置 letterSpacing 即可，代碼如下：

animation
  .add({
    scale: 0.5
  })
  .add({
    letterSpacing: "10px"
  })

此時的效果如下所示：

后面還有2個步驟，「文案呈圓環狀擴散開，擴散的同時文字變大；文字之間的間距從中心逐個聚攏，間距變小」，換做上面的思路也就是將文字變大和將文字間距變小，增加相應的代碼如下：

  .add({
    scale: 1
  })
  .add({
    letterSpacing: "6px"
  });

最后

本文通過 Letterize.js + Anime.js 實現了一個很炫酷的文字動畫效果，文字的每個字符呈波浪式的擴散式展開和收起。anime.js還有很多的參數可以嘗試，有興趣的朋友可以嘗試探索看看~

看完本文如果覺得有用，記得點個贊支持，收藏起來說不定哪天就用上啦～

參考

動畫效果發布者 Wojciech Krakowiak ：https://codepen.io/WojciechWKROPCE/pen/VwLePLy

原文鏈接：https://juejin.cn/post/7300847292974071859

畫偏移法的SVG文本動畫

由于上傳圖片大小有限制，所以只能制作這樣質量的動圖，實際效果比這流暢很多！

程序員300行純css代碼制作使用筆畫偏移法的SVG文本動畫特效

效果由300行css代碼制作，不帶任何javascript代碼，有想把css練習一下的小伙伴可以用來練習一下。以下附上源碼。

如果有正在學習前端javascript的伙伴，不知道怎么學習，或者該學些什么才能找到工作的可以一起來我們的頭條前端群589651705,每晚都會分享一些企業級的知識和面試技巧。

使用筆畫偏移法的SVG文本動畫特效源碼

代碼過長有需要文檔版源碼的可以加群589651705獲取，已上傳群文件

需要更多的炫酷企業級練習特效，學習方法和面試技巧，敬請關注本頭條號！

在線咨詢

上一篇：呼吸燈效果（極簡css實現）
下一篇：前端學習：圖像標簽的基本特點和相關屬性

您的項目需求

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

整合營銷服務商