04usedStyle2.md

goer ... 2022-01-05

大约 3 分钟

CSS3 特殊样式

[toc]

# css3 特殊样式

# (1). 变形样式

transform 变形样式

translate

平移，平移的元素不会受其他元素干扰

第一个值是x轴平移
第二个值是y轴平移,可以省略不写,y轴不平移
translateX,只能设置X轴平移
translateY,只能设置Y轴平移

div{
	transform:translate(20px);
}

1
2
3
4
5
6
7
8

transform-origin

设置元素的中心点，旋转默认是中心点 50% 50% 处
```
div{
    transform-origin 0 0; 左上角
    transform:rotate(90deg);
}
```
1
2
3
4

rotate

旋转单位是deg角度

div{
    transform:rotate(40deg 90deg);x轴旋转40度  y90度
    transform:rotateX(40deg);x轴旋转40度
     transform:rotateY(40deg);Y轴旋转40度
     transform:rotateZ(40deg);Z轴旋转40度
}

1
2
3
4
5
6

scale

缩放值是缩放的倍数

div{
    transform:scale(2);放大两倍
}

1
2
3

skew

斜切,单位是deg角度,第一个值是x轴斜切,第二个值是y轴斜切
```
div{
    transform:skew(40deg, 50deg)
}
```
1
2
3

translate3d()

3D平移

第一个值是X平移
第二个值是Y平移
第三个值是Z平移
div{
    transform:translate3d(0,0,50px);
}

1
2
3
4
5
6

# (2). 过渡动画

transition: 过渡动画，让动画看起来更流畅

transition-property

动画中被改变的属性,需要把被改变的属性一个一个按照逗号隔开写进来,为了省事或者想改变所有属性就使用==all==

div{
    width:100px;
    height:100px;
    background-color:blue;
    /*transition-property:width;*/
    名称
    transition-property:all;
    时间
    transition-duraiton:2s;
    速度函数
    transition-timing-function:ease-in-out;
    延迟时间
	transition-delay:2s;
}
div:hover{
    width:200px
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

transition-duration

完成动画需要的时间以秒s为单位上面
transition-timing-function

动画执行的形式速度相关的函数

vlaue explain

ease (默认)逐渐变慢

linear 匀速

ease-in 加速

ease-out 减速

ease-in-out 先加速再减速
transition-delay

动画延迟时间,以秒s为单位,动画过了几秒钟才开始执行

vlaue	explain
ease	(默认)逐渐变慢
linear	匀速
ease-in	加速
ease-out	减速
ease-in-out	先加速再减速

简写；
div{
    transition:all 2s ease 3s;
    transition：名称、完成时间、执行形式、延迟时间
}

1
2
3
4
5

# (3).动画

自定义动画,不需要触发,直接执行

animation-name

动画名称： @keyframes 定义动画名称

动画名称：gogogo
@keyframes gogogo{
    0%/form{
        width:200px;
        background-color:black;
    }
    100%/to{
        width:600px;
        transform:scale(2);
        background-color:yello;
    }
}
div{
    animation-name:gogogo;
    animation-duration:2s;
    animation-timing-function:ease-out;
    animation-delay:2s; 
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

animation-duration

动画执行的时间（多少秒完成）
```
animation-duration:2s;
```
1

animation-timing-function

动画执行的方式（变化的函数）

和transition-timing-function动画执行的形式  速度相关的函数一样，
有很多的值。

1
2

animation-delay

动画的延迟时间
```
animation-delay:2s;   两秒后执行
```
1

animation-iteration-count

动画执行的次数 infinite(无限次)

animation-iteration-count:2 , infinite;
执行2次 执行无数次

1
2

animation-direction

动画执行的顺序

vlaue	explain
normal	默认从0%执行到100%
reverse	从100%执行到0% 倒着执行
alternate	先从0%执行到100%,再从100%执行到0%,动画执行次数最少两次
alternate-reverse	先从100%执行到0%,再从0%执行到100%,动画执行次数最少两次

animation-direction:alternate;

animation-play-state

动画的状态

running,默认运动
paused,暂停
animation-play-state:paused;

1
2
3

animation-fill-mode

动画执行完毕之后的状态

value explain

none 默认值，执行完毕后返回初始属性

forwards 执行完毕后保持100%时候的属性

backwards 执行完毕后返回0%时候属性

both 执行完毕时候的属性

value	explain
none	默认值，执行完毕后返回初始属性
forwards	执行完毕后保持100%时候的属性
backwards	执行完毕后返回0%时候属性
both	执行完毕时候的属性

简写

@keyframes go{
    animation:上面8个值按照顺序写
    0%{  /*初始属性*/
       	width:100px;
        transform:translateX(100px)
        background-color:blue;
    }
    30%{
        width:150px;
        transform:rotateX(60deg) scale(1.3);
        background-color:green;
    }
    60%{
        height:300px;
        transform:translateY(20px) rotateY(60deg) scale(2);
        background-color:yello;
    }
    90%{
        background-color:black;
    }
    100%{ /*结束属性*/
        width:100px;
        height:100px;
        background-color:pink;
    }
        
}
div{
    animation:go 2s linear 1s infinite reverse forwards;
}
div:hover{
    animation-play-dtate:paused;
}

一般的话就这样就行
div{
   	animation: go 2s forwards;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

animate.css是一个css3动画库

http://daneden.me/animate

03usedStyle.md 05layout.md

04usedStyle2.md

# css3 特殊样式

# (1). 变形样式

# (2). 过渡动画

# (3).动画

详情