基于HTML5+CSS3動畫效果的設計與實現

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

關鍵詞：CSS3;動畫;transition;transform;animation

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

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

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

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

1 CSS3過渡

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

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

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

2 CSS3變形

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

CSS3變形（transform）屬性可以實現2D變形和3D變形。

2.1 2D變形

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

2D變形的常用函數包括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變形函數類似，包括移動、縮放和旋轉，但沒有傾斜。

3 CSS3動畫

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

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

3.1 @keyframes規則

CSS3中使用@keyframes創建關鍵幀，@keyframes規則的語法格式如下所示：

@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設置@keyframes動畫的名稱，animation-duration設置整個動畫的持續時間，animation-timing-function設置動畫的速度曲線，animation-delay設置動畫的開始時間，animation-iteration-count設置動畫的播放次數，animation-direction設置動畫是否逆向交替播放。

4 CSS3動畫的設計與實現

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

4.1 效果描述

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

4.2 結構分析

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

4.3 樣式分析

根據效果圖及結構分析定義相應的樣式。

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

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

4.4 制作頁面結構

根據上面的分析，使用相應的HTML標簽搭建網頁結構，具體代碼如下：

4.5 定義CSS樣式

搭建完頁面的結構，接下來為頁面添加CSS樣式。

4.5.1 拼合靜態樣式

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

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

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

#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 添加動畫效果——立方體六個面展開動畫

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

（1）創建動畫

@keyframes規則用于創建動畫，具體代碼如下：

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

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

@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）引用動畫

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

#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;}

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

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

4.5.3 添加動畫效果——立方體旋轉動畫

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

（1）創建動畫

@keyframes規則用于創建動畫，具體代碼如下：

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

（2）引用動畫

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

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

5 結語

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

參考文獻：

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

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

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

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

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

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

收稿日期：2021-08-22

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