如何改變顏色形狀？

嘿，我知道如何使彩虹的背景下，很容易如何改變顏色形狀？

<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

你有谷歌嗎？你的例子中使用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%} 
}

只要使用分度類「包裝」和背景中的CSS顏色應該改變你的設定。

來源

2017-04-10 19:08:45 Dzontra

Yay thanks bruh –

如何改變顏色形狀？

回答

相關問題