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

忆夕若梦

1、元素动效
1.过渡 - transition  
        过渡为一个元素正在差别形态之间切换差别的过渡成果，由过渡属性的称号、过渡需求的工夫、过渡的方法、过渡的提早工夫四部分构成。留意过渡必需是正在元素形态切换下停止，需求用到真类。
（1）过渡属性的称号 - transition-property  过渡款式

1. div {
2.     transition-property: background-color;
3. }

复造代码

        值需求间接写需求过渡的属性称号，当过渡多个款式的时分能够写 all。
（2）过渡需求的工夫 - transition-duration

1. div {
2.    transition-duration: 0.5s;
3. }

复造代码

（3）过渡的方法 - transition-timing-function，CSS中启拆了5种方法：

ease;	默许值，先缓再快最初缓
ease-in;	先缓，后愈来愈快
ease-in-out;	速率正在开端战结束时皆很缓,中心没有加快
ease-out;	先快，后愈来愈缓
linear;	匀速

1. div {
2.    transition-timing-function: linear;
3. }

复造代码

（4）过渡的提早工夫 - transition-delay 
        提早工夫指正在过渡成果开端感化之前需求等候的工夫，以s或ms为单位，与值为正会提早一段工夫去呼应过渡成果；与值为背会招致过渡立刻开端。

1. div {
2.    transition-delay: 1s;
3. }

复造代码

（5）简化写法，格局：transition：过渡工夫 提早工夫 过渡方法 过渡款式。

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

复造代码

        留意：提早工夫必需写正在过渡工夫当前，其他能够变动地位；最简写法为 transition:过渡工夫；
（6）多重款式过渡，操纵transition停止多个差别的过渡款式时，每个差别工夫的过渡款式用逗号分开。

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

复造代码

2.变革
（1）translate( )  位移函数

transform: translateX(x);	沿X轴标的目的仄移，正值左移，背值左移
transform: translateY(y);	沿Y轴标的目的仄移，正值下移，背值上移
transform: translate(x, y);	沿X轴战Y轴同时仄移

        操纵margin背值办法的元素居中必需明白子元素的宽下，而位移函数不消：

1. .zi {
2.    position: absolute;
3.    top: 50%;
4.    left: 50%;
5.    transform: translate(-50%, -50%);
6. }

复造代码

（2）rotate( )  扭转函数，该函数默许为Z轴扭转，deg单位为扭转角度，角度能够为正值或背值，扭转的中间面是元素最中间的面。

1. div {
2.    transform: rotateZ(360deg);
3. }

复造代码

（3）scale( )  缩放函数，缩放函数中的参数是以倍数为根底的，1代表当前大小，
[table][tr][td]1[/td][td]代表当前大小[/td][/tr][tr][td]>1[/td][td]代表放年夜的倍数[/td][/tr][tr][td]