时间戳

首页 > 解决方案 > 循环中的 CSS 关键帧渐变动画

html - 循环中的 CSS 关键帧渐变动画

问题描述

我想要一个原始背景所在的 CSS 动画

background-image: linear-gradient(to right top, #003eb3, #007BFF, #53b2ff, #0097DB, #009b74, #00c785);

如何使用 CSS 关键帧创建平滑动画以更改颜色的位置

一个例子：从 'red, green, blue' 到 'blue, red, green' 但平滑

先感谢您

标签： htmlcsscss-animationslinear-gradientskeyframe

解决方案

你能这样吗:)

通过添加动画

 animation: GradAnim 3s ease-in-out 0s infinite alternate;

ease-in-out - 也就是说，变化在开始和结束时都发生得很慢，只在中间某个地方加速。这为更改提供了柔和的边缘（隐喻）并且通常感觉良好。

无限 - 即动画应该无限次播放（永远）。

交替- 先向前播放动画，然后向后播放。

关于CSS 中动画的完整信息

body{
  opacity: 1;
  background: none;
}

body:after,
body:before {
  content: '';
  display: block;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

body:before {
  background: linear-gradient(to right top, blue 0%, green 50%, red 100%);
  animation: GradAnim 3s ease-in-out 0s infinite alternate;
}

body:after {
  background: linear-gradient(to right top, red 0%, green 50%, blue 100%);
  animation: GradAnim 3s ease-in-out -3s infinite alternate;
}

@keyframes GradAnim {
  0%{opacity: 1.0}
  100%{opacity: 0.2}
}

推荐阅读