基于HTML5+CSS3動畫效果的設(shè)計與實現(xiàn)

摘要：針對傳統(tǒng)Web設(shè)計，需借助JavaScript腳本或者Flash來實現(xiàn)動畫效果的問題，CSS3新增了過渡、變形和動畫屬性，讓動畫特性實現(xiàn)得更加簡單。文章依次介紹了實現(xiàn)動畫的三個核心技術(shù)即過渡（transition）屬性、變形（transform）屬性和動畫（animation）屬性，并在此基礎(chǔ)上以立方體盒子的展開與旋轉(zhuǎn)效果為例，從效果描述、結(jié)構(gòu)分析、樣式分析、制作頁面結(jié)構(gòu)、定義CSS樣式這五個方面具體闡述了基于CSS3動畫效果的實現(xiàn)過程。基于HTML5+CSS3的動畫效果的實現(xiàn)大大提高了網(wǎng)頁開發(fā)的效率，大幅度提升了用戶的體驗感。

關(guān)鍵詞：CSS3;動畫;transition;transform;animation

中圖分類號：TP311? ? ? ? 文獻標識碼：A

文章編號：1009-3044（2022）17-0094-03

在飛速發(fā)展的網(wǎng)絡(luò)時代，為了追求更為直觀的瀏覽與交互體驗，用戶對網(wǎng)站的美觀性和交互性提出越來越高的要求，動畫這種表現(xiàn)形式也被越來越廣泛地應用到網(wǎng)頁設(shè)計中。

傳統(tǒng)的Web設(shè)計，往往需要使用JavaScript腳本或者Flash來實現(xiàn)動畫效果。在CSS3中，新增了過渡、變形和動畫屬性，可以輕松實現(xiàn)旋轉(zhuǎn)、縮放、移動和過渡等動畫效果，讓動畫和特效的實現(xiàn)變得更加簡單，大幅度提升用戶的體驗感。

1 CSS3過渡

在CSS3之前，由于沒有過渡屬性transition，當修改CSS樣式時，CSS樣式屬性值就會瞬間變成修改后的值，此時CSS樣式的變化是沒有過渡效果的，這樣會直接影響到用戶的體驗[1]。

CSS3的過渡（transition）屬性就是在一定的時間平滑地改變一個元素的CSS值，使得元素從一個樣式過渡到另一個樣式，從而實現(xiàn)簡單的動畫交互效果。

過渡（transition）屬性是一個復合屬性，主要包含transition-property 、transition-duration 、transition-timing-function和 transition-delay 這4個屬性，其基本語法格式為：transition：property duration timing-function delay [2]。其中transition-property設(shè)置應用過渡的CSS屬性，transition-duration設(shè)置元素過渡效果的持續(xù)時間，transition-timing-function設(shè)置過渡效果的速度曲線，以及transition-delay設(shè)置過渡效果的開始時間。

2 CSS3變形

CSS3動畫相關(guān)的第2個屬性就是變形（transform），該屬性可以對元素進行移動、縮放、旋轉(zhuǎn)或傾斜等操作。同時變形（transform）可以和過渡（transition）屬性結(jié)合，實現(xiàn)一些絢麗網(wǎng)頁動畫效果[3]。

CSS3變形（transform）屬性可以實現(xiàn)2D變形和3D變形。

2.1 2D變形

在CSS3中，2D變形主要包括移動（translate）、縮放（scale）、旋轉(zhuǎn)（rotate）、傾斜（skew）這四種。在進行2D變形時，還可以通過使用transform-origin屬性改變變形對象的中心點，進一步豐富變形效果。變形（transform）屬性既適用于行內(nèi)（inline）元素（比如span），又適用于塊級（block）元素（比如div）[4]。

2D變形的常用函數(shù)包括translate（x，y）、scale（x，y）、rotate（angel）和skew（x-angel，y-angel）。

2.2 3D變形

2D變形是元素在X軸和Y軸的變化，而3D變形是元素圍繞X軸、Y軸、Z軸的變化。相對于平面化2D變形，3D變形更注重于空間位置的變化[5]。

3D與2D變形函數(shù)類似，包括移動、縮放和旋轉(zhuǎn)，但沒有傾斜。

3 CSS3動畫

雖然利用CSS3的transition屬性和transform屬性可以實現(xiàn)簡單的動畫效果，但如果想要實現(xiàn)更復雜的動畫效果，則可以使用CSS3中的@keyframes規(guī)則和animation屬性。

一個完整的CSS動畫由兩部分構(gòu)成，分別是“一組定義的動畫關(guān)鍵幀”和“描述該動畫的CSS聲明”，前者使用@keyframes創(chuàng)建，后者使用animation屬性聲明[1]。

3.1 @keyframes規(guī)則

CSS3中使用@keyframes創(chuàng)建關(guān)鍵幀，@keyframes規(guī)則的語法格式如下所示：

@keyframes animationname {

keyframes-selector { css-styles;}

}

3.2 animation屬性

animation屬性用于描述動畫的CSS聲明，包括指定具體動畫以及動畫時長等行為。

與transition類似，animation也是一個復合屬性，它主要包括animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction這6個動畫屬性[6]。其中animation-name設(shè)置@keyframes動畫的名稱，animation-duration設(shè)置整個動畫的持續(xù)時間，animation-timing-function設(shè)置動畫的速度曲線，animation-delay設(shè)置動畫的開始時間，animation-iteration-count設(shè)置動畫的播放次數(shù)，animation-direction設(shè)置動畫是否逆向交替播放。

4 CSS3動畫的設(shè)計與實現(xiàn)

下面以立方體盒子的展開與旋轉(zhuǎn)為例，介紹實現(xiàn)動畫效果的具體方法。由于HTML頁面都是平面的，只能通過二維平面的視覺效果來模擬一個立方體效果。

4.1 效果描述

整個動畫過程如圖1所示，首先立方體的六個面是折疊在一起的，接著每個面圍繞各自的旋轉(zhuǎn)軸進行依次展開，形成立方體，最后這個立方體進行整體旋轉(zhuǎn)。

4.2 結(jié)構(gòu)分析

立方體由六個面組成，每個面用一個div標簽設(shè)置。由于要制作整體的旋轉(zhuǎn)效果，所以需將立方體的六個面放入一個大的div中。

4.3 樣式分析

根據(jù)效果圖及結(jié)構(gòu)分析定義相應的樣式。

（1）設(shè)置立方體每個面的樣式，需要對其設(shè)置寬度、高度、背景色及透明度、邊框色。

（2）設(shè)置立方體的樣式，需要對其設(shè)置寬度、高度、居中對齊。

4.4 制作頁面結(jié)構(gòu)

根據(jù)上面的分析，使用相應的HTML標簽搭建網(wǎng)頁結(jié)構(gòu)，具體代碼如下：

4.5 定義CSS樣式

搭建完頁面的結(jié)構(gòu)，接下來為頁面添加CSS樣式。

4.5.1 拼合靜態(tài)樣式

制作動畫之前，首先需要通過CSS代碼拼合好立方體六個面的靜態(tài)樣式，具體代碼如下：

運行測試時發(fā)現(xiàn)立方體六個面的上下疊加順序是按照代碼輸入的先后順序進行疊加排列的（如圖2所示），即從上到下依次是后面→前面→底面→頂面→右側(cè)面→左側(cè)面。如果希望按照動畫播放的先后順序進行疊加排列（如圖3所示），即從上到下依次是左側(cè)面→右側(cè)面→頂面→底面→前面→后面。

這就需要給每個面設(shè)置z-index屬性，調(diào)整重疊定位標簽的堆疊順序，z-index屬性取值越大，設(shè)置該屬性的定位標簽在層疊標簽中越居上，進一步給每個面增加如下代碼：

#left_side{z-index： 6; }

#right_side{z-index： 5; }

#top_side{z-index： 4; }

#bottom_side{z-index： 3; }

#front_side{z-index： 2; }

#back_side{z-index： 1; }

4.5.2 添加動畫效果——立方體六個面展開動畫

添加動畫效果主要包括兩個步驟：第一步需要創(chuàng)建動畫，第二步引用動畫。

（1）創(chuàng)建動畫

@keyframes規(guī)則用于創(chuàng)建動畫，具體代碼如下：

@keyframes left_side {100%{transform： rotateY（-90deg）;} }<！--/*左側(cè)面展開動畫*/-->

@keyframes right_side {100%{transform： rotateY（90deg）;} }<！--/*右側(cè)面展開動畫*/-->

@keyframes top_side {100%{transform： rotateX（90deg）;} }<！--/*頂面展開動畫*/-->

@keyframes bottom_side {100%{transform： rotateX（-90deg）;} } <！--/*底面展開動畫*/-->

@keyframes front_side {100%{transform： translateZ（200PX）;} }<！--/*前面展開動畫*/-->

@keyframes back_side {100%{transform： rotateY（180deg）;} }<！--/*后面展開動畫*/-->

（2）引用動畫

創(chuàng)建動畫后，分別在每個面的div標簽中添加animation屬性?？紤]到每一個面在展開過程中并未按照元素的中心點為參照進行變形，所以在定義時需利用transform-origin屬性改變每個面的旋轉(zhuǎn)軸，具體代碼如下：

#left_side{ transform-origin： left; animation： left_side 1s linear 1s both;}

#right_side{ transform-origin： right; animation： right_side 1s linear 2s both;}

#top_side{ transform-origin： top; animation： top_side 1s linear 3s both;}

#bottom_side{ transform-origin： bottom; animation： bottom_side 1s linear 4s both;}

#front_side{ transform-origin： center; animation： front_side 1s linear 5s both;}

#back_side{ transform-origin： center; animation： back_side 1s linear 6s both;}

動畫測試后，發(fā)現(xiàn)立方體每個面的展開缺乏立體感，這是由于計算機屏幕是二維平面，就需要通過添加perspective屬性實現(xiàn)視覺上的3D效果。下面繼續(xù)給#wrap添加以下代碼：

#wrap{ perspective： 500px; } <！--/*表示元素距視圖的距離為500px*/-->

4.5.3 添加動畫效果——立方體旋轉(zhuǎn)動畫

添加動畫效果主要包括兩個步驟，第一步需要創(chuàng)建動畫，第二步引用動畫。

（1）創(chuàng)建動畫

@keyframes規(guī)則用于創(chuàng)建動畫，具體代碼如下：

@keyframes scroll{100%{transform： rotate3d（1，1，1，360deg）;}} <！--/*旋轉(zhuǎn)360°動畫*/-->

（2）引用動畫

創(chuàng)建動畫后，給#cube添加animation屬性，具體代碼如下：

#cube{animation： scroll 2s linear 7s infinite;transform-style： preserve-3d;} <！--/*設(shè)置3D環(huán)境*/-->

5 結(jié)語

互動、互聯(lián)、互通的網(wǎng)頁多媒體新生態(tài)正悄然形成，動畫是一個Web作品中重要的“調(diào)味劑”。CSS3動畫作為當前頁面動畫的主力軍，利用新增的過渡、變形和動畫屬性，輕松實現(xiàn)了旋轉(zhuǎn)、縮放、移動和過渡等動畫效果，較之JavaScript動畫的實現(xiàn)方式就顯得愈發(fā)簡單了。

參考文獻：

[1] 黑馬程序員.響應式Web開發(fā)項目教程：HTML5+CSS3+Bootstrap[M].2版.北京：人民郵電出版社，2021.

[2] 黑馬程序員.HTML5+CSS3網(wǎng)頁設(shè)計與制作[M].北京：人民郵電出版社，2020.

[3] 黑馬程序員.HTML+CSS+JavaScript網(wǎng)頁制作案例教程[M].2版.北京：人民郵電出版社，2021

[4] 鄧強. Web前端開發(fā)實戰(zhàn)教程HTML5+CSS3+JavaScript[M].北京：人民郵電出版社，2021.

[5] 范玉玲，段春筍，張芊茜. HTML5+CSS3+Bootstrap響應式Web前端設(shè)計[M].北京：人民郵電出版社，2021.

[6] 王浩，國紅軍，鄧明楊. HTML5+CSS3+JavaScript Web前端開發(fā)案例教程[M].北京：人民郵電出版社，2021.

收稿日期：2021-08-22

作者簡介：蔣婧（1984—），女，江蘇揚州人，講師，主要研究方向為Web前端開發(fā)。