CSS渐变动画效果

目录

渐变

线性渐变

平铺

径向渐变

动画

平移

旋转 （角度 deg）

缩放

倾斜

过渡动画

@keyframes关键帧

---

渐变

线性渐变

linear-gradient(不平铺)/repeating-linear-gradient(平铺)

开始位置的角度   起始颜色   终止颜色

to left(从右开始到左边去)  颜色后面可以给百分比或者百分比

background: linear-gradient(to left,red,blue);

平铺

background: repeating-linear-gradient(30deg,red,blue);

径向渐变

radial-gradient(不平铺)/repeating-radial-gradient(平铺)

形状  发散方向  起始颜色  终止颜色

circle(圆形)  at top(从上开始)   颜色后面可以给百分比或者百分比

默认椭圆

background: radial-gradient(circle,red,blue);

动画

平移

第一个值是横向偏移量 第二个值是纵向偏移量 平移之后占位状态不变

transform: translate(30px,30px);
background-color:blue;

旋转 （角度 deg）

transform: rotate(30deg);
background-color: red;

缩放

默认值是1 小于1是缩小 大于1是放大

加两个位置 top left right bottom center

transform: scale(0.5);
background-color: green;

倾斜

里面的所有元素会跟着盒子一起走

transform: skew(30deg);

横轴倾斜

transform: skewX(20deg);

竖轴倾斜

transform: skewY(20deg);

过渡动画

第一个值是属性 一般是all 也可以是其他的属性名称

 第二个值是时间 单位是时间单位 通常是s、

第三个值是过渡时间 linear匀速

可以只写时间 其他两个值默认填充 all和linear

transition: all 2s linear;

@keyframes关键帧

animtion是调用 name是自己取的 2s是动画时间 linear是匀速

animation: name 1s linear;

@keyframes name {
0%{
transform: translate(30px,30px);
}
25%{
transform:scale(0.5) rotate(720deg);
}
50%{
transform: rotate(1080deg);
}
100%{
transform: rotate(1440deg);
}