色の形を変えるには？

はねえ、私は虹の背景を作る方法を知っている、それは色の形を変えるには？

<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>

簡単ですが、たとえば、このコードを使用して変更するカラーサークルまたは他の形状を作る方法を知っているのですか？おかげさまで

出典

2017-04-10 Anonymous 1582

Googleを使いましたか？あなたの例であなたがjavascriptを使用した理由はありますか？あなたは、例えば、唯一のCSSでこれを行うことができます。

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

CodepenただCSSで色を使用してセットを変更する必要があり、クラス「ラッパー」と背景を持つdiv要素を使用しています。

出典

2017-04-10 19:08:45 Dzontra

ありがとうbruh –

答えて

関連する問題