CSS3_渐变、过渡和动画

一、CSS3渐变（Gradients）

1.1、简介：

  CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示安稳的过渡。

1.2、欣赏器兼容性

• ie9及更早版本不支持渐变属性
  

1.3、线性渐变（linear gradients）

语法1：

1. background: linear-gradient(to direction, color-stop1, color-stop2, ...);

复制代码

说明： derection表现的是指向方向

• derection（方向）单边取值：
  

• left：渐变方向为从右到左
  
• right：渐变方向为从左到右
  
• top：渐变方向为从下到上
  
• bottom：渐变方向为从上到下
  

• derection（方向）对角取值：
  

• left top：渐变方向为从右下到左上
  
• top right：渐变方向为从左下到右上
  
• right bottom：渐变方向为从左上到右下
  
• bottom left：渐变方向为从右上到左下
  

实例：

1. background: linear-gradient(to left, red, green, yellow);

复制代码

语法2：

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

复制代码

说明： angle表现的是角度指向

• angle（方向）角度取值：
  

• 0deg：渐变方向为从下到上
  
• 90deg：渐变方向为从左到右
  
• 180deg：渐变方向为从上到下
  
• 270deg：渐变方向为从右到左
  

实例：

1. background: linear-gradient(45deg, red, green, yellow);

复制代码

重复线性渐变：

1. background: repeating-linear-gradient(to direction/angle, color deg1, color deg2, ...);

复制代码

说明： deg表现的是l两两颜色之间渐变的距离，可以设百分比值，也可以设px值
实例：

1. background-image: repeating-linear-gradient(to left, red, yellow 10%, green 20%); background-image: repeating-linear-gradient(80deg, red, yellow 20px, green 35px);

复制代码

1.4、径向渐变（radial gradients）

语法1：

1. background: radial-gradient(x-deg y-deg at position, start-color, ..., last-color);

复制代码

说明：

• x-deg和y-deg和position取值：
  

• deg：百分比
  
• px：像素
  
• 其他距离单位等
  

• x-deg和y-deg和position用法：
  

• position：设置圆心的位置
  
• x-deg：设置x轴距离圆心的位置
  
• y-deg：设置y轴距离圆心的位置
  
• x-deg=y-deg：形状为圆形
  
• x-deg!=y-deg：形状为椭圆形
  

实例：

1. background: radial-gradient(20px 50% at 50% 50%,#000,#fff,blue);

复制代码

重复径向渐变：

1. background: repeating-linear-gradient(x-deg y-deg at position, color deg1, color deg2, ...);

复制代码

说明： deg表现的是l两两颜色之间渐变的距离，可以设百分比值，也可以设px值
实例：

1. background: repeating-radial-gradient(20px 50% at 50% 50%,#ea00f9 0%,#e90101 10%,#14fffa 20%)

复制代码

二、CSS3过渡（Transition）

2.1、简介：

  CSS3 渐变（gradients）可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

2.2、欣赏器兼容性

• ie9及更早版本不支持渐变属性
  
  
  
  

2.3、过渡属性

• transition-property（必选）：规定应用过渡的 CSS 属性的名称。
  
• transition-duration（必选）：界说过渡效果耗费的时间。默认是 0。
  
• transition-timing-function（可选）：规定过渡效果的时间曲线。默认是 “ease”。
  

• ease：默认先慢，再快，再慢
  
• linear：匀速
  
• ease-in：由慢到快。
  
• ease-out：由快到慢。
  
• ease-in-out：由慢到快再到慢。
  

• transition-delay（可选）：规定过渡效果何时开始。默认是 0。
  

实例：

1. div{        transition-property: width;    transition-duration: 1s;    transition-timing-function: linear;    transition-delay: 2s;}

复制代码

简写语法：

1. transition : [ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ] ;

复制代码

注意：
transition-property 和 transition-duration 是必填选项！
实例：

1. div{        transition-property: width 1s;        transition-property: width 1s linear 2s;}

复制代码

三、CSS3动画（Animate）

3.1、简介：

  CSS3 动画（animate）可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

3.2、欣赏器兼容性

• ie9及更早版本不支持渐变属性
  
  
  
  

3.3、动画属性

创建属性：@keyframes，一般写在css末了

1. @keyframes myfirst{    0%   {background: red; left:0px; top:0px;}    25%  {background: yellow; left:200px; top:0px;}    50%  {background: blue; left:200px; top:200px;}    75%  {background: green; left:0px; top:200px;}    100% {background: red; left:0px; top:0px;}}

复制代码

其他属性：

• animation-name（必选）：规定 @keyframes 动画的名称。
  
• animation-duration（必选）：规定动画完成一个周期所耗费的秒或毫秒。默认是 0。
  
• animation-timing-function（可选）：规定动画的速度曲线。默认是 “ease”。
  

• ease：默认先慢，再快，再慢
  
• linear：匀速
  
• ease-in：由慢到快。
  
• ease-out：由快到慢。
  
• ease-in-out：由慢到快再到慢。
  

• animation-delay（可选）：规定动画何时开始。默认是 0。
  
• animation-fill-mode（可选）：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
  
• animation-iteration-count（可选）：规定动画被播放的次数。默认是 1，infinite无限循环。
  
• animation-direction（可选）：规定动画是否在下一周期逆向地播放。默认是 “normal”，alternate反向播放，。
  
• animation-play-state（可选）： 规定动画是否正在运行或暂停。默认是 “running”，paused暂停。
  

简写语法：

1. transition : [ animation-name ] || [animation-duration ] || [...] ;

复制代码

注意：
animation-name 和 animation-duration 是必填选项！
实例：

1. div{        animation: myfirst 5s linear;        animation: myfirst 5s linear 2s infinite alternate;}@keyframes myfirst{    0%   {background: red; left:0px; top:0px;}    25%  {background: yellow; left:200px; top:0px;}    50%  {background: blue; left:200px; top:200px;}    75%  {background: green; left:0px; top:200px;}    100% {background: red; left:0px; top:0px;}}

复制代码

来源：https://blog.csdn.net/qq_45677671/article/details/111995506
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！