发布于 

css高级用法

CSS高级用法

核心知识点

2D转化及相关属性[重要]

基本语法: transition:all .5;[过度动画]
旋转:
transform:rotate(deg//) 正顺负逆默中心
tranform-origin/改变旋转中心点/ 绕点旋转
具体坐标 |
缩放:
tranform:scale(x (w), y (h)); 倍数
scale()中设置的值表示的是一个倍数,没单位
scale()中设置的值如果大于0且小于1, 缩小
scale()中设置的值大于1, 放大
scale()中设置的值等于1, 不变
scale()中设置的值等于0,该宽高等于0
scale()中设置的值可以设置一个,宽和高的倍数
scale()中不能设置负数
注:如果页面中元素要同时设置多个tranform属性的时候,tranform属性要合写[防层叠]
位移:
x轴:水平,左向右为正
y轴:垂直,上向下为正
tranform:tranlate(x,y);
中第一个值代表水平方向位移,第二个值代表垂直方向位移

补充:线性渐变
background-image: linear-gradient( /* 渐变的方向 / to right, #34c2aa, #6cd557 / 使用角度的方式渐变 / / 135deg, red, blue */ );

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

### **3D转换**

```css

语法:
tranform:tranlateX(值) /*x必须大写*/可以设置百分比
tranlateX只能让元素沿着水平方向位移
可以设置负数,沿水平相反的方向位移(从右往左)
可以设置百分比,百分比是相对于当前元素的宽度
Y

Z
prespective: 透视在浏览器中出现近大远小的效果 (透视:推荐值-->600--1000)
prespective属性设置:给tranform属性的父元素添加
总结:


旋转:
加个坐标轴
x 正往我这边
Y 正往右 开门
z 于2d转换效果一样
总结:如果元素沿着x轴旋转,x轴默认中间位置

3d改旋转轴 tranSform-origin
tranSform-origin:left;轴
缩放:
tranSporfm: scale()

转化样式平面转立体
transform-style:preserve-3d;

animation属性

animation–动画自动播放 ,动画次数可以无限次执行

transition— 动画需用户动作,动画随着用户动作的取消

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@keyframes name {
/*设置动画在开始时候的样式*/
from {

}
/* 动画开始后的一个效果 */
to {

}
}
animation-name:调用动画名称
animation-dyration:设置动画时间
animation-iteraton-count:设置动画次数 infinite;无限次执行
animation-direction:alternate; 逆播
animation-timing-function:;速度默认值ease | linear匀速
ease-in 加速 | ease-out 减速 |ease-in-out
animation-fill-mode:forwards;让动画在结束位置停止[条件不能设置无限次数]
animation-delay:设置动画延迟时间

animation复合属性:
1.设置 animation -name
2 设置 animation-duration

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。

唯獨少了個字.