CSS3 渐变色动态动画背景

动态渐变是常见于设计的一种动风格之一,今天就让我们来实现这个解读这个花里胡哨的需求

非常简单,我们可以分三步走先设置渐变背景,再设置背景尺寸,最后控制背景移动

.songDetailContainer{
  /* 渐变色背景斜度和颜色组 */
  background-image: linear-gradient(125deg,#332e2e,#d8503e,#6e2828,#2c2424); 
  /* 背景尺寸 */
  background-size: 400%; 
  /* 循环动画 */
  animation: bganimation 15s infinite;}.text{  color: white; 
}
/* @keyframes动画,设置background-position的变化值 */
@keyframes bganimation {  
  0%{    
    background-position: 0% 50%; 
  }  
  50%{    
    background-position: 100% 50%; 
  }  
  100%{    
    background-position: 0% 50%; 
  }
}

要点：

background-image: linear-gradient（）； 

linear-gradient() 函数用于创建一个线性渐变的图像。为了创建一个线性渐变，需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。

其中的“125deg” 是设置渐变的倾斜角度；

background-position：

属性设置背景图像的起始位置。

原理图示：

@keyframes和animation属性

@keyframes

通过 @keyframes 规则创建动画。

@keyframes keyframes-name {keyframes-selector {css-styles;}}
keyframes-name 帧列表的名称。 名称必须符合 CSS 语法中对标识符的定义。
keyframes-selector 动画时长的百分比。合法值：
0-100%
from 等效于 0%
to 等效于 100%
css-styles 需要改变的css样式，支持多属性

更多信息详见MDN:@keyframes - CSS(层叠样式表) | MDN

animation

animation 是一个简写的属性，用于设置6个动画属性：

• animation-name：这个就是使用@keyframes定义的动画名称；
• animation-duration：动画执行的时间，以秒为单位
• animation-delay：规定动画开始之前的延迟
• animation-iteration-count：规定动画应该播放的次数,n(次数) | infinite(无限次)
• animation-direction：规定是否应该轮流反向播放动画
• animation-timing-function：规定动画的速度曲线