一丶渐变
(1)线性渐变
background-linear-gradient
to left 去左边铺
30 deg 30度铺
to right bottom 去右下角铺
background:repeating-linear-gradient 平铺
(2)径向渐变
background:radial-gradient
二丶动画
tranform
translate 平移
rotate 旋转 deg是角度
三丶缩放
transform scale 缩放
transform-origin 改变位置 left top 左上角
四丶倾斜
transform-skew 倾斜
五丶动画过渡
transition all s linear
第一个值是属性一般为all
第二个值是时间s 一般为s
第三个是过度速度
也可以直接写一个s
六丶关键帧
@key frames name 关键帧 name的名字可以自取
animation:name 2s name可以自己取名字 s时间
格式如下 想让哪个关键帧在style里加 animation:和你关键帧取的名字名
@keyframes hello {
30%{
width: 300px;
}
60%{
width: 1000px;
}
100%{
width: 1200px;
}
}
.box1:hover{
cursor: pointer;
transform: rotate(3000deg);
transition: 10s;
animation: hello 10s;
}