Web前端开发工程师知识体系_19_CSS（终）

Posted 2021-09-16 小马学前端

一、元素动效

1.过渡 - transition  

        过渡为一个元素在不同状态之间切换不同的过渡效果，由过渡属性的名称、过渡需要的时间、过渡的方式、过渡的延迟时间四部分组成。注意过渡必须是在元素状态切换下进行，需要用到伪类。

（1）过渡属性的名称 - transition-property  过渡样式

div {
    transition-property: background-color;
}

        值需要直接写需要过渡的属性名称，当过渡多个样式的时候可以写 all。

（2）过渡需要的时间 - transition-duration

div {
   transition-duration: 0.5s;
}

（3）过渡的方式 - transition-timing-function，CSS中封装了5种方式：

ease;	默认值，先慢再快最后慢
ease-in;	先慢，后越来越快
ease-in-out;	速度在开始和结束时都很慢,中间不加速
ease-out;	先快，后越来越慢
linear;	匀速

div {
   transition-timing-function: linear;
}

（4）过渡的延迟时间 - transition-delay 

        延迟时间指在过渡效果开始作用之前需要等待的时间，以s或ms为单位，取值为正会延迟一段时间来响应过渡效果；取值为负会导致过渡立即开始。

div {
   transition-delay: 1s;
}

（5）简化写法，格式：transition：过渡时间 延迟时间 过渡方式 过渡样式。

div {
   transition: 1s  1s ease background-color;
}

        注意：延迟时间必须写在过渡时间以后，其他可以调换位置；最简写法为 transition:过渡时间；

（6）多重样式过渡，使用transition进行多个不同的过渡样式时，每一个不同时间的过渡样式用逗号分隔。

div {
   transition: 1s border-radius, 1s 1s opacity;
}

2.变化

（1）translate( )  位移函数

transform: translateX(x);	沿X轴方向平移，正值右移，负值左移
transform: translateY(y);	沿Y轴方向平移，正值下移，负值上移
transform: translate(x, y);	沿X轴和Y轴同时平移

        使用margin负值方法的元素居中必须知道子元素的宽高，而位移函数不用：

.zi {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

（2）rotate( )  旋转函数，该函数默认为Z轴旋转，deg单位为旋转角度，角度可以为正值或负值，旋转的中心点是元素最中心的点。

div {
   transform: rotateZ(360deg);
}

（3）scale( )  缩放函数，缩放函数中的参数是以倍数为基础的，1代表当前大小，

1	代表当前大小
>1	代表放大的倍数
<1	代表缩小的倍数
0	代表消失
负值	代表镜面翻转，后面的数字仍然生效

        也可以写两个值，如果写一个表示x轴和y轴用同一个值。

div {
   transform: scale(-1, -1);
}

（4）skew( )  倾斜扭曲函数，在2d变换中倾斜，可以有X轴和Y轴的倾斜角度，默认为X轴倾斜。

skewX	x轴扭曲，正值水平左侧扭曲，负值右侧扭曲
skewY	y轴扭曲，正值左侧向上，负值右侧向上

div {
   transform: skewX(-40deg);
   transform: skewY(50deg);
}

（5）基点 - transform-origin

        改变元素变化时的原点，默认情况下，元素的中心原点位于x轴和y轴的50%处。

3.动画

（1）关键帧  - @keyframes

        css中的@规则，通过在动画序列中定义关键帧的样式，来控制CSS动画序列中的步骤，以百分比来规定改变发生的时间，或者通过关键词"from"和"to"，等价于0%和100%。

        创建关键帧：

@keyframes move {
   0% {transform: translate(0);}
   100% {transform: translate(600px);}
}
/* 0%为开始时间 */
/* 100%为结束时间 */
/* move为帧名 */

 （2）动画名称  - animation-name，指定动画要使用哪一个关键帧。

 （3）结束时间 - animation-duration，代表一个动画周期的时长，默认值0秒，调用动画时必须写：动画名称、持续时间。

（4）运动方式 - animation-timing-function

ease;	默认值，先慢再快最后慢
ease-in;	先慢，后越来越快
ease-in-out;	速度在开始和结束时都很慢,中间不加速
ease-out;	先快，后越来越慢
linear;	匀速
steps(数值, 定位)	定位：start/end，默认为end指逐步运动

div {
   animation-timing-function: steps(8,end);
}

（5）延迟时间 - animation-delay，与过渡延迟时间同用。

（6）结束状态 - animation-fill-mode，设置动画结束时盒子的状态，在动画运行到某个位置的时候，动画停止，元素默认会迅速回到起始位置。

forwards	保持动画结束后的状态
backwards	动画结束后回到最初的状态

（7）执行顺序 - animation-direction

normal	正向，默认值
reverse	反向

（8）循环次数 - animation-iteration-count，其值通常为整数，默认为1，值infinite表示无限循环。

（9）简写方式

        格式：animation: 执行时间  延迟时间  关键帧名称  运动方式  运动次数  结束状态;

        最简：最简方式 animation: 动画执行时间  执行关键帧名称;（ 注意执行时间和延迟时间顺序不可调整）

（10）动画停止 - animation-play-state，单独写，不可加入简写之中。

running	运动的（默认）
paused	暂停

/*鼠标移入ul时，暂停动画*/
.xz-roll ul:hover {
    animation-play-state: paused;
}

---

        css样式将对布局、字体、颜色、背景和其它文图效果实现更加精确的控制。只通过修改一个文件就改变页数不计的网页的外观和格式。 在所有浏览器和平台之间的兼容性。更少的编码、更少的页数和更快的下载速度。除了还不能全面支持我们常用的大多数浏览器之外，CSS在实现其它承诺方面作得相当出色。CSS在改变我们制作样式表的方法。它为大部分的网页创新奠定了基石。

        CSS 终。