1. 动画
介绍:改变盒子在平面内的形态(平移、缩放、旋转、倾斜)
属性:
-
- 平移:transform:translate(值1 ,值2);(默认为X轴,translateY--下移)
-
— —平移依然在原来文档流。
-
- 移动:transform:translate(值1,值2);可右斜移动
-
代码:
/* 平移 */ .translate{ width: 150px; height: 150px; background-color: pink; } /* 鼠标悬浮效果-->X轴平移500px */ /* 平移值为X轴,Y轴时 就会脱离平移*/ .translate:hover{ background-color: yellow; transform: translate(500px); }
视图:
-
- 旋转:transform:rotate(度数);单位:deg
-
— —默认原点是盒子中心。(可为正负,正为:顺时针,负为:逆时针)
代码:
/* 鼠标悬浮效果 */ .rotate:hover{ background-color: yellowgreen; /* 旋转30度 */ transform: rotate(30deg); }
视图:
-
- 缩放:transform:scale(值);1为区间,小于1则缩小,大于1则放大;值为负则反向缩放
-
— —transform:scale(值1,值2) 按照x与y轴缩放。若一个值为等比例缩放。scale:正为放大,负为缩小
代码:
.scale{ width: 150px; height: 150px; /* 背景色 */ background-color: turquoise; } /* 鼠标悬浮效果显示 */ .scale:hover{ /* 小于1则缩小,大于1则放大 */ transform: scale(2); }
-
- 倾斜:transform:skew(度数);单位:deg
-
.skew{ width: 150px; height: 150px; /* 背景色 */ background-color: turquoise; } /* 鼠标悬浮效果显示 */ .skew:hover{ /* 正负倾斜不同 */ transform: skew(30deg); }
-
- 平移、缩放、旋转、倾斜可相互搭配使用。
- 值:可为正负。单位:px、百分比(正负出现的效果不同,建议多次尝试)
- 如果设置一个值-->X轴距离,第二个值-->Y轴距离
2. 渐变:
- 线性渐变:
属性:linear-gradinet
渐变方向:to left、right、top、bottom(组合使用)
角度:渐变终止方向的角度,渐变方向为百分比与单位值(deg)可用
重复渐变:repeating-linear-gradinet(color1,color2)--在颜色前可设置角度(单位:deg),后可加占比(单位:px)
代码:
/* 线性渐变 */ .linear{ width: 500px; height: 300px; border: 5px solid wheat; border-radius: 400px; /* 渐变 to lef-->向左渐变 */ background: linear-gradient(to left, red, orange, yellow,green, blue, indigo,purple ); /* 重复渐变 */ background: repeating-linear-gradient(30deg,red,yellow,white) }
视图:
- 镜像(放射)渐变:(与盒子形状有关:盒子为正方形,镜像渐变为圆)
属性:radial-gradient();
形状:ellipse 椭圆/ circle 圆
发散方向:形状 + at + left、right、top、bottom(可组合)
重复渐变:repeating-radial-gradinet(color1 ,color2)color后可加占比(单位:px)
代码:
.radial{ width: 500px; height: 500px; border: 5px solid wheat; /* 普通镜像 */ background: radial-gradient(white,pink,yellow); /* 镜像重复渐变-->圆形-->从右下渐变 */ /* background:repeating-radial-gradient(circle at right bottom ,yellow 4px,white 10px); */ }
视图:
3. 过渡动画:
过渡动画:transtion:all (时长,单位:s/ms) linear;
— —属性: all:所有属性获得动画,linear:匀速
— —先慢后快:ease-in
代码:
.guodu{ width: 300px; height: 300px; background-color: aquamarine; } /* 过渡动画,鼠标悬浮旋转20° 同时 缩小 并平移100px*/ .guodu:hover{ transform: translate(100px) rotate(20deg) scale(0.5) ; /* 图片位置-->右下 */ transform-origin: right bottom; }
4. 图片位置:
transform-origin:left/right/top/bottom(可组合);
5.关键帧:
@keyframes 自定义名 {
到达某个值时,例:10%{
动画...
}
}
animation: 自定义名 秒值 速度;
-
- 0%开始,100%完成。
- 在 @keyframes 中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。
- 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
- 尽量用百分比来规定变化发生的时间,或用关键词"from"和"to",等同于0%和100%。
代码:
.box{ width: 300px; height: 300px; background-color: wheat; /* 将关键帧动画写入 6秒 匀速*/ animation: guanjianzhen 6s linear; } /* 关键帧 */ /* 0时平移200px-->50时旋转30°-->80时放大-->完成时平移回原位 */ @keyframes guanjianzhen { 0%{ transform: translate(200px); } 50%{ transform: rotate(30deg); } 80%{ transform: scale(5); } 100%{ transform: translate(0px); } }
标签:平移,关键帧,进阶,动画,--,渐变,transform,background From: https://www.cnblogs.com/warmNest-llb/p/17870720.html