Question

嘿，我知道如何制作彩虹背景，很容易

<html>
<center>
<head>
<style>
body {
    background-color: red;
    transition: background-color 5s;
}
</style>
</head>
<body>
<script type="text/javascript">
var colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];

var i = 1;

window.setInterval(function(){
document.body.style.backgroundColor = colors[i];
i++;
if (i === colors.length){
i=0;
}
}, 5000);
</script>
</body>
</center>
</html>

但您知道如何使用此代码制作更改色环或其他形状吗？感谢。

Answer 1

你有谷歌吗？您的示例中是否有使用javascript的原因？您只能使用css执行此操作，例如：

Codepen

.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%}
}

只需在课堂上使用div＆＃34;包装＆＃34;和背景应该随着你在css中设置的颜色而改变。

如何改变颜色形状？

1 个答案: