文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS彩虹渐变循环动画

问CSS彩虹渐变循环动画
EN

Stack Overflow用户

提问于 2021-11-17 14:12:24

回答 1查看 170关注 0票数 2

正在尝试找到一种方法来创建CSS彩虹条纹动画循环...类似于下面的内容：

目前只能创建彩虹条纹的图像，但现在确定如何创建一个连续的动画，就像在gif与CSS。

background: linear-gradient(-45deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%);

图像：

感谢您的阅读。

css

colors

linear-gradients

回答 1

Stack Overflow用户

发布于 2021-11-17 15:16:27

您可以尝试如下所示：

html {
  min-height:100%;
  background: 
   linear-gradient(rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%) 
   0 0/100% 200%;
   animation: a 2s linear infinite;
}

@keyframes a {
  to {background-position:0 -200%}
}

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70005935

复制

相似问题

问CSS彩虹渐变循环动画
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS彩虹渐变循环动画EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS彩虹渐变循环动画
EN