CSS高级技巧
过渡
过渡属性
transition-property: 过渡属性;
transition-duration: 动画时间;
transition-timing-function: 动画执行的速度效果;
transition-delay: 延迟
复合属性
transition: all 1s linear 1s;
动画速度效果
linear：匀速运动
ease： 慢快慢（默认值）
ease-in： 由慢到快
ease-out： 由快到慢
steps(integer)： 分多少步完成
2D转换
缩放 scale()
平移translate(x, y)
旋转rotate(0deg)
变形- skew(x, y)
中心点transform-origin
缩放 scale()
1
2
3
4
| - scale(x, y) ：在x、y轴上对元素进行缩放，如果第二个参数未提供，取第一个参数的值。
- scaleX() ：指定元素在X轴的缩放（水平方向）
- scaleY() ：指定元素在Y轴的缩放（垂直方向）
- 以自己的中心点进行缩放
|
平移translate(x, y)
1
2
3
4
5
| - translate(x, y)： 在x、y轴上对元素进行移动，如果第二个参数未提供，则默认值为0。
- translateX()： 指定元素在X轴的移动 （水平方向）
- translateY()： 指定元素在Y轴的移动 （垂直方向）
- 中心点水平或垂直移动
|
旋转rotate(0deg)
1
| rotate(0deg)： 指定元素的旋转角度。
|
变形- skew(x, y)
1
2
3
4
| - skew(x, y)： 在x、y轴上对元素进行扭曲（斜切）操作。如果第二个参数未提供，则默认值为0。
- skewX()： 指定元素在X轴的扭曲（水平方向）
- skewY()： 指定元素在Y轴的扭曲（垂直方向）
|
中心点transform-origin
1
2
3
4
5
| transform-origin： 指定元素在2D转换中的中心点。
- 语法： transform-origin: x y;
- 值可以是关键字 left right top bottom 也可以是具体的像素值
|
动画
定义动画
用@keyframes 动画名 {}定义一个动画
1
2
3
4
5
6
7
8
9
10
| @keyframes Hello {
from {
transform: translateX(0);
}
to {
transform: translateX(500px);
}
}
from to 也可写成 0% 10% 100%
可以被多个元素重复使用
|
调用动画
animation: 动画名称 执行时间 运动形式 延迟时间 执行次数 是否反向运动;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| 元素 {
animation: 动画名称 执行时间 运动形式 延迟时间 执行次数 是否反向运动;
}
.box {
width: 100px;
height: 100px;
background: green;
animation: world 5000ms linear infinite alternate;
}
毫秒,秒都行
|
动画属性介绍
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
| - animation-name：动画名称
- animation-duration：动画的持续时间
- animation-timing-function： 动画的过渡类型
- linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
- ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
- ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
- ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
- ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
- animation-delay： 动画延迟的时间
- animation-iteration-count： 动画的循环次数 默认1次 infinite永久
- animation-direction： 动画是否反向运动
- normal： 正常方向
- reverse： 反方向运行, 从动画结束状态运行到动画开始状态
- alternate： 动画先正常运行再反方向运行，并持续交替运行
- alternate-reverse： 动画先反运行再正方向运行，并持续交替运行
- animation-fill-mode： 动画结束状态
- forwards： 保存结束时状态
- backwards：结束还原
- animation-play-state 设置动画的运行状态
- paused 暂停
- running 播放
- animation: 复合写法
- anmatiton： boxAnimation 1s linear 2s 10 reverse forwards;
- 解释： 延迟两秒(2s)， 匀速(linerar) 反方向(reverse) 执行 boxAnimation 动画， 时长为1秒(1s)， 重复10次(10)。
|
立方体
1
| transform-style:preserve-3D -->使其子元素在3D空间中呈现，使2D元素变成3D
|