HTML怎么实现复杂动画和变形

这篇"HTML怎么实现复杂动画和变形"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"HTML怎么实现复杂动画和变形"文章吧。

1、复杂动画

（1）涉及到的属性：

animation-name：动画名称；

animation-duration：单次动画总时长；

animation-timing-function：时间函数；

animation-delay：播放前延时的时长；

animation-iteration-count：播放次数（具体的数字），当设置infinite时是循环播放；

animation-direction：播放顺序，其中normal是正常播放，alternate是轮流反向播放，播放次数必须在2次以上。

（2）书写方式

@keyframes 名字（自己取一个名字）{ ——>定义一个动画

}

 1  2  3  4  5      6      7      8      9 10 54 55 56     
57         动画练习58         59     
60 61 62 

效果如下：

2、盒子变形

（1） 变形：通过变形可以改变盒子的视觉效果，变形不会改变盒子原本的位置和尺寸，因此不会对其他元素造成影响。

（2） 变形的类型

Translate（移动）

Scale（缩放，1以下是缩小，1以上是扩大）

Skew（倾斜，单位deg）

Rotate（旋转，默认是沿着Z轴旋转，单位deg）

（3） 定义原点

Transform-origin：设置盒子的中心点。

（4） 其他属性

背面可见性：backface-visibility

visible：默认值，背面可见

hidden：背面不可见

 1  2  3  4  5      6      7      8      9 10 51 52 53     
54         
正面
55         
反面
56     
57 58 59 

以上就是关于"HTML怎么实现复杂动画和变形"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。