css 实现动态渐变效果

发表于 | 分类于 | 评论数： | 阅读次数：

使用 css3 中的linear-gradient,加上 css3 中的 动画(animation),可以轻松地实现动态渐变效果.(css 是最难的语言 😢.)

效果实现

设置渐变背景

参考linear-gradient api:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient

简单示例:

1
2
3
4
5
6
7
8
9

/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

动画

参考linear-gradient api:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations

创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes 规则实现，具体情况参见使用 keyframes 定义动画序列小节部分。

animation 的子属性有:

animation-delay
设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。
animation-direction
设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
animation-duration
设置动画一个周期的时长。
animation-iteration-count
设置动画重复次数， 可以指定 infinite 无限次重复动画
animation-name
指定由@keyframes 描述的关键帧名称。
animation-play-state
允许暂停和恢复动画。
animation-timing-function
设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。
animation-fill-mode
指定动画执行前后如何为目标元素应用样式。

结合背景与动画示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
animation: bg-change 15s infinite ease forwards;
background: linear-gradient(294deg, #76e345, #2395d5);
background-size: 400% 400%;

@keyframes bg-change {
  0% {
    background-position: 0% 28%;
  }
  50% {
    background-position: 100% 73%;
  }
  100% {
    background-position: 0% 28%;
  }
}

写在最后

https://www.gradient-animator.com/

一个生成动态渐变背景并可以实时预览的网站,无意中找到的.

end.

thank u !