CSS动画页面特效

1.2D、3D转换

通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或者拉伸。转换是使元素改变形状、尺寸和位置的一中效果，可以使用2D、3D来转换元素。

（1）2D转换

translate（x,y）移动[两个参数：x为x坐标移动量，y为y坐标移动量]

rotate（a）旋转[一个参数：a为旋转的角度]

cale（a,b）缩放[两个参数：a为宽度的缩放倍数，b为高度的缩放倍数]

kew（a,b）倾斜[两个参数：a为绕x轴旋转的角度，b为绕y轴旋转的角度]

matrix（）

（2）3D转换方法

rotateX（）

rotateY（）

2.动画

通过CSS3，也可以进行动画创建，CSS3的动画需要遵循@keyframes规则，包括规定动画的时长，规定动画的名称。

3.多列

在CSS3中，可以创建多列来对文本或者区域进行布局

属性包括：

     column-count 列数


     column-gap 列间距


     column-rule 列边框

4.过渡

通过使用CSS3，可以给元素添加一些过渡效果。

CSS3过渡是元素从一种样式转换成另一种样式

属性如下：

<table> <tbody> <tr> <td>属性</td> <td>描述</td> </tr> <tr> <td>transition</td> <td>设置四个过渡属性</td> </tr> <tr> <td>transition-property</td> <td>过渡的名称</td> </tr> <tr> <td>transition-duration</td> <td>过渡效果花费的时间</td> </tr> <tr> <td>transition-timing-function</td> <td>过渡效果的时间曲线</td> </tr> <tr> <td>transition-delay</td> <td>过渡效果开始时间</td> </tr> </tbody> </table>nn > 原文地址：https://blog.csdn.net/weixin_42452874/article/details/80829567?ops_request_misc=&request_id=d849e32a9a6446339a30a0b0f7bb1867&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-28-80829567-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88