基于HTML5+CSS3动画效果的设计与实现
2022-08-31蒋婧
摘要：针对传统Web设计，需借助JavaScript脚本或者Flash来实现动画效果的问题，CSS3新增了过渡、变形和动画属性，让动画特性实现得更加简单。文章依次介绍了实现动画的三个核心技术即过渡（transition）属性、变形（transform）属性和动画（animation）属性，并在此基础上以立方体盒子的展开与旋转效果为例，从效果描述、结构分析、样式分析、制作页面结构、定义CSS样式这五个方面具体阐述了基于CSS3动画效果的实现过程。基于HTML5+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前端开发。
