渐变/变换/过渡/动画

渐变

线性渐变

background-image:linear-gradient(black,navy,purple)

background-image:linear-gradient(to right top,black,navy,purple,pink,white)

background-image:linear-gradient(90deg,black,navy,purple)

background-image:linear-gradient(black 0px,navy 100px,purple 200px)

径向渐变

background-image:radial-gradient(black,navy,purple)

background-image:radial-gradient(at left top,black,navy,purple)

background-image:radial-gradient(at 120px 80px,black,navy,purple)

background-image:radial-gradient(circle at 120px 80px,black,navy,purple)

background-image:radial-gradient(circle,black,navy,purple)

background-image:radial-gradient(circle,black 0px,navy 100px,purple 200px)

锥形渐变

background-image:conic-gradient(black,navy,purple)

变换

位移变换 transform: translate(50px,100px);

旋转变换 transform: rotate(30deg);        原点 transform-origin:50px 50px

缩放变换 -ms-transform: scale(2,3)；    原点 transform-origin:50px 50px

斜切变换 transform: skew(30deg,20deg);

transform: matrix(0.866,0.5,-0.5,0.866,0,0);

过渡

transition: width 2s, height 2s, transform 2s;

动画 animation

过渡和动画的区别：

1.关于设计思想层面的

过渡：关注两个状态的柔和变化，更关注的是柔和度（两个位置/状态）

动画：关注点在于整个状态的变化过程，更关注过程中间的每一步操作（关键帧）

过渡不能设置中间位置的变化

动画中间的每一个细致的操作，都可以自己实现

2.关于触发条件的

过渡需要触发条件，比如鼠标悬停（JS单击）

动画不需要触发条件，浏览器加载好之后，如果没有延迟，可以立即执行

3.关于执行次数

过渡只执行一次，但是事件失效的时候，还会原路返回

动画可以通过设定次数，来执行，比如可以设置三次/无数次