基于HTML5+CSS3動(dòng)畫效果的設(shè)計(jì)與實(shí)現(xiàn)

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

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

中圖分類號：TP311? ? ? ? 文獻(xiàn)標(biāo)識碼：A

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

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

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

1 CSS3過渡

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

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

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

2 CSS3變形

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

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

2.1 2D變形

在CSS3中，2D變形主要包括移動(dòng)（translate）、縮放（scale）、旋轉(zhuǎn)（rotate）、傾斜（skew）這四種。在進(jìn)行2D變形時(shí)，還可以通過使用transform-origin屬性改變變形對象的中心點(diǎn)，進(jìn)一步豐富變形效果。變形（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ù)類似，包括移動(dòng)、縮放和旋轉(zhuǎn)，但沒有傾斜。

3 CSS3動(dòng)畫

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

一個(gè)完整的CSS動(dòng)畫由兩部分構(gòu)成，分別是“一組定義的動(dòng)畫關(guān)鍵幀”和“描述該動(dòng)畫的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屬性用于描述動(dòng)畫的CSS聲明，包括指定具體動(dòng)畫以及動(dòng)畫時(shí)長等行為。

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

4 CSS3動(dòng)畫的設(shè)計(jì)與實(shí)現(xiàn)

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

4.1 效果描述

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

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

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

4.3 樣式分析

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

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

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

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

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

4.5 定義CSS樣式

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

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

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

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

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

#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 添加動(dòng)畫效果——立方體六個(gè)面展開動(dòng)畫

添加動(dòng)畫效果主要包括兩個(gè)步驟：第一步需要?jiǎng)?chuàng)建動(dòng)畫，第二步引用動(dòng)畫。

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

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

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

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

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

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

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

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

（2）引用動(dòng)畫

創(chuàng)建動(dòng)畫后，分別在每個(gè)面的div標(biāo)簽中添加animation屬性。考慮到每一個(gè)面在展開過程中并未按照元素的中心點(diǎn)為參照進(jìn)行變形，所以在定義時(shí)需利用transform-origin屬性改變每個(gè)面的旋轉(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;}

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

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

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

添加動(dòng)畫效果主要包括兩個(gè)步驟，第一步需要?jiǎng)?chuàng)建動(dòng)畫，第二步引用動(dòng)畫。

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

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

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

（2）引用動(dòng)畫

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

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

5 結(jié)語

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

參考文獻(xiàn)：

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

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

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

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

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

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

收稿日期：2021-08-22

作者簡介：蔣婧（1984—），女，江蘇揚(yáng)州人，講師，主要研究方向?yàn)閃eb前端開發(fā)。