【前端三剑客——CSS】动画

渐变

线性渐变

默认——从上到下

background-image: linear-gradient(颜色,颜色)

颜色后可加百分比,表示从过渡层级

可以做隔断的效果

实现方法：不给渐变的机会

从左到右

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

左上到右下

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

任意角度

background-image: linear-gradient(angle, color-stop1, color-stop2);

background-image: linear-gradient(-90deg, red, yellow);

径向渐变

中心向外成圆形扩散渐变

默认——普通模式

background-image: radial-gradient(red, yellow, green);

分配比例

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

设置形状

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

注意：默认为椭圆

重复渐变

background-image: repeating-radial-gradient(red ,yellow 10%,green 15%);

transform 2D变幻

只有视觉效果,原生位置没有变化

注意: 无法作用于行内元素

平移translate 旋转rotate 缩放(scale) 倾斜(skew)

transform-orgin:x-axis y-axis z-axis;

旋转基点

translate平移

transform: translate(50px, 100px);

左为X轴,右为Y轴

rotate旋转

transform: rotate(30deg);

可以只设置XYZ其中一个,rotateX

scale缩放

transform: scale(2,3);

单值,则XY设置同值

skew倾斜

transform: skew(30deg, 20deg);

transition 过渡

语法:

transition: property duration timing-fuction delay;

• property 过渡属性名称，width left等数值型或color
• duration 过渡所需时间
• timing-fuction 过渡速度曲线
• delay 延时时长 m,ms

timing-fuction曲线属性

值	描述
linear	相同速度开始到结束
ease	慢速开始,再变快,再慢速结束
ease-in	慢速开始的过渡效果
ease-out	慢速结束的过渡效果
ease-in-out	慢速开始和结束

cubic-bezier 贝兹曲线,了解就行

cubic-bezier(n,n,n,n)

n取值0到1

transition也可以值叠加，之间用，隔开

animation 动画

@keyframes

帧动画

语法:

@keyframes animationName { 
 from { 
 properties: value; 
 } 
 percentage { 
 properties: value; 
 } 
 to { 
 properties: value; 
 } 
} 
//or 
@keyframes animationName { 
 0% { 
 properties: value; 
 } 
 percentage { 
 properties: value; 
 } 
 100% { 
 properties: value; 
 } 
} 

animation: name 10s;

animation: name duration timing-fuction delay iteration-count direction

count_播放次数 无限infinite

direction 播放方向 normal alternate 正反交替

animation-play-state running paused

filter滤镜

filter 属性定义了元素(通常是 )的可视效果(例如：模糊与饱和度)。

• none
• blur(px)
• brightness(%)
• contrast(%)
• ...

​
 
img {
   -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
   filter: blur(5px);
}
/* 模糊 */