html 彩虹渐变动画

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 彩虹渐变动画相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<style>.wrapper { 
  height: 100%;
  width: 100%;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;

-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite;}

@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
</style>
</head>
<body>
<div class="wrapper"></div>
</body>
</html>

以上是关于html 彩虹渐变动画的主要内容，如果未能解决你的问题，请参考以下文章

json 混合彩虹渐变

如何在 C# 中获得彩虹色渐变？

多种CSS3渐变应用方法总结附实例

iOS之UI--彩虹动画进度条学习和自主封装改进

css动画和渐变

html 配置文件卡与渐变背景动画