css 渐变动画

今日学习了渐变，动画；

线性渐变 ： linear-gradient

两种颜色渐变，方向默认有上到下：

background-image:linear-gradient(red,blue);

在颜色前加方向：

background-image:linear-gradient(to right，red,blue);

去右下  由左上到右下：

background-image:linear-gradient( to right bottom，red,blue);

加角度：

background-image:linear-gradient( 60deg ，red,blue);

加颜色的占比：

background-image:linear-gradient( 60deg ，red 20%,blue40%);

加像素：

background-image:linear-gradient( 60deg ，red 20px,blue60px);

重复渐变：

background-image:repeating-linear-gradient( 60deg ，red 20px,blue);

经向渐变

background-image: radial-gradient(形状 发射方向 其实颜色 终止颜色)

形状：ellipse（椭圆）  circle（圆）

发射方向：left（左）right（右）top（上）bottom（下）center（中间）可以组合使用

大小(半径)：属性值可用像素或关键字表示

closest-side:圆心到距离最近的边

farthest-side:圆心到距离最远的边

closest-corner：圆心到距离最近的角

farthest-corner：圆心到距离最远的角

重复的径向渐变： background-image:repeating-radial-gradinet()

动画：transform

transporm:translate(100px,100px)水平竖直方向位移

translateX （x轴位移）   translateY（y轴位移）

transporm:scale（2）缩放

scaleX（x轴缩放）    scaleY（y轴缩放）

teansform-origin :（像素/百分比/方位）  改变元素变形的基准点）

transform：rotate(60deg)    旋转   deg 度数

skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换

 skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。

 skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。

transition 过渡时间  单位秒过毫秒

关键帧

@keyframes  动画名{form{}to{}}    0-100%/from...to... 必需。动画时长的百分比；

动画     animation：动画名   动画时长  贝塞尔曲线  开始时间    播放次数；

normal 顺向播放/ alternate 动画应该轮流反向播放

规定过渡效果的时间曲线

infinite 为无限次播放；

linear 规定以相同速度开始至结束的过渡效果

 ease 规定慢速开始，然后变快，然后慢速结束的过渡效果

 ease-in 规定以慢速开始的过渡效果

 ease-out 规定以慢速结束的过渡效果

 ease-in-out 规定以慢速开始和结束的过渡效果。