一篇文章教會(huì)你使用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í)，可前往專業(yè)網(wǎng)站：http://pdcfighting.com/

上面gif動(dòng)圖所示，這是一個(gè)很炫酷的文字動(dòng)畫(huà)效果，文字的每個(gè)字符呈波浪式的擴(kuò)散式展開(kāi)。本次文章將解讀如何實(shí)現(xiàn)這個(gè)炫酷的文字效果。

基于以上的截圖效果可以分析出以下是本次要實(shí)現(xiàn)的主要幾點(diǎn)：

文案呈圓環(huán)狀擴(kuò)散開(kāi)，擴(kuò)散的同時(shí)文字變小
文字之間的間距從中心逐個(gè)擴(kuò)散開(kāi)，間距變大
文案呈圓環(huán)狀擴(kuò)散開(kāi)，擴(kuò)散的同時(shí)文字變大
文字之間的間距從中心逐個(gè)聚攏，間距變小
動(dòng)畫(huà)重復(fù)執(zhí)行以上4個(gè)步驟

實(shí)現(xiàn)過(guò)程

核心代碼實(shí)現(xiàn)需要基于以下兩個(gè)庫(kù)：

Letterize.js是一個(gè)輕量級(jí)的JavaScript庫(kù)，它可以將文本內(nèi)容分解為單個(gè)字母，以便可以對(duì)每個(gè)字母進(jìn)行動(dòng)畫(huà)處理。這對(duì)于創(chuàng)建復(fù)雜的文本動(dòng)畫(huà)效果非常有用。
使用Letterize.js，你可以輕松地將一個(gè)字符串或HTML元素中的文本分解為單個(gè)字母，并為每個(gè)字母創(chuàng)建一個(gè)包含類名和數(shù)據(jù)屬性的新HTML元素。這使得你可以使用CSS或JavaScript來(lái)控制每個(gè)字母的樣式和動(dòng)畫(huà)。

anime.js是一個(gè)強(qiáng)大的JavaScript動(dòng)畫(huà)庫(kù)，它提供了一種簡(jiǎn)單而靈活的方式來(lái)創(chuàng)建各種動(dòng)畫(huà)效果。它可以用于HTML元素、SVG、DOM屬性和JavaScript對(duì)象的動(dòng)畫(huà)。

通過(guò)使用Letterize.js以便可以對(duì)每個(gè)字母進(jìn)行動(dòng)畫(huà)處理，再結(jié)合anime.js即可創(chuàng)建各種動(dòng)畫(huà)效果。本文不對(duì)這兩個(gè)庫(kù)做更多的詳細(xì)介紹，只對(duì)本次特效實(shí)現(xiàn)做介紹，有興趣的可以看看官網(wǎng)完整的使用文檔。

界面布局

html就是簡(jiǎn)單的本文標(biāo)簽，也不需要額外的樣式，只需要在外層使用flex布局將內(nèi)容居中，因?yàn)楸疚牡拈L(zhǎng)度都是一樣的，所以完成后的文本內(nèi)容就像一個(gè)正方形。

<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>

動(dòng)畫(huà)實(shí)現(xiàn)

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

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

接下來(lái)初始化 anime 庫(kù)的使用，下面的代碼即創(chuàng)建了一個(gè)新的anime.js時(shí)間線動(dòng)畫(huà)。目標(biāo)是Letterize對(duì)象的所有字母。動(dòng)畫(huà)將以100毫秒的間隔從中心開(kāi)始，形成一個(gè)網(wǎng)格。loop: true 動(dòng)畫(huà)將無(wú)限循環(huán)。

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

開(kāi)始執(zhí)行動(dòng)畫(huà)，首先設(shè)置「文案呈圓環(huán)狀擴(kuò)散開(kāi)，擴(kuò)散的同時(shí)文字變小」，這里其實(shí)就是將字母的大小縮小。

animation
  .add({
    scale: 0.5
  })

此時(shí)的效果如下所示：

繼續(xù)處理下一步動(dòng)畫(huà)，「文字之間的間距從中心逐個(gè)擴(kuò)散開(kāi)，間距變大」，這里處理的其實(shí)就是將字母的間距加大，通過(guò)設(shè)置 letterSpacing 即可，代碼如下：

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

此時(shí)的效果如下所示：

后面還有2個(gè)步驟，「文案呈圓環(huán)狀擴(kuò)散開(kāi)，擴(kuò)散的同時(shí)文字變大；文字之間的間距從中心逐個(gè)聚攏，間距變小」，換做上面的思路也就是將文字變大和將文字間距變小，增加相應(yīng)的代碼如下：

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

最后

本文通過(guò) Letterize.js + Anime.js 實(shí)現(xiàn)了一個(gè)很炫酷的文字動(dòng)畫(huà)效果，文字的每個(gè)字符呈波浪式的擴(kuò)散式展開(kāi)和收起。anime.js還有很多的參數(shù)可以嘗試，有興趣的朋友可以嘗試探索看看~

看完本文如果覺(jué)得有用，記得點(diǎn)個(gè)贊支持，收藏起來(lái)說(shuō)不定哪天就用上啦～

參考

動(dòng)畫(huà)效果發(fā)布者 Wojciech Krakowiak ：https://codepen.io/WojciechWKROPCE/pen/VwLePLy

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

畫(huà)偏移法的SVG文本動(dòng)畫(huà)

由于上傳圖片大小有限制，所以只能制作這樣質(zhì)量的動(dòng)圖，實(shí)際效果比這流暢很多！

程序員300行純css代碼制作使用筆畫(huà)偏移法的SVG文本動(dòng)畫(huà)特效

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

如果有正在學(xué)習(xí)前端javascript的伙伴，不知道怎么學(xué)習(xí)，或者該學(xué)些什么才能找到工作的可以一起來(lái)我們的頭條前端群589651705,每晚都會(huì)分享一些企業(yè)級(jí)的知識(shí)和面試技巧。

使用筆畫(huà)偏移法的SVG文本動(dòng)畫(huà)特效源碼

代碼過(guò)長(zhǎng)有需要文檔版源碼的可以加群589651705獲取，已上傳群文件

需要更多的炫酷企業(yè)級(jí)練習(xí)特效，學(xué)習(xí)方法和面試技巧，敬請(qǐng)關(guān)注本頭條號(hào)！

在線咨詢

上一篇：呼吸燈效果（極簡(jiǎn)css實(shí)現(xiàn)）
下一篇：前端學(xué)習(xí)：圖像標(biāo)簽的基本特點(diǎn)和相關(guān)屬性

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商