css动画

层级：z-index:10; 大的在上面（可以为负）

动画样式：渐变过渡动画

线性渐变

background: linear-gradient(red, blue);     默认从上到下可多个颜色

background: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1));  透明色渐变

background: linear-gradient(to bottom right, red , blue);    到右下

background: linear-gradient(180deg, red, blue);           角度方向

background: repeating-linear-gradient(red, yellow 10%, green 20%); 重复渐变

径向渐变

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

background: radial-gradient(red 5%, green 15%, blue 60%);

background: radial-gradient(circle, red, yellow, green);   圆形

background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);

 farthest- corner     尺寸

background: repeating-radial-gradient(red, yellow 10%, green 15%); 重复渐变

2D

transform:rotate(60deg);         转动60度

transform-origin:left top;         旋转中心左上  0px 0px  center

transform: translate(100px,100px); 移动

transform: scale(2,3);            缩放倍数

transform: skew(20deg,30deg);    X:20 Y:30 Y可不写

transform: skewX(20deg);        沿X轴y偏转20度     skewY

transform:matrix(2,0.5,-0.5,0.866,0,0);x放大,倾斜,倾斜,y放大,x偏移,y偏移

3D

transform-style:preserve-3d;   3D显示                          div

transform: perpective(800px) rotateX(0deg);  透距800px 设0防跳变 div

transform: rotateX(180deg) [translateZ];    沿X轴转  rotateY      div img

backface-visibility:hidden;     背面不可见                      div img

过渡

 

.tiao_title{transition: right 0.5s;}

.tiao:hover .tiao_title{right: 97px;}

 

transition:width 2s;    宽变动两秒     all 2s linear

:hover{width:300px;}   光标宽变成300px

transition: width 2s, height 2s, transform 2s;   宽高转换

:hover{width: 200px; height:200px; transform:rotate(180deg);

宽变200   高变200      转动180度

动画

animation:myfirst 5s linear 2s infinite alternate forwards;

动画时间速度延迟次数倒放终状态

@keyframes myfirst{0% {background:red; left:0px; top:0px;}  定义动画

                    25% {background:yellow; left:200px; top:0px;}}

动画展示进度百分比from:0% , to:100%  对应颜色位置

position:relative;  位置:相对自身