如何使用 css 為包括所有 html colors 的漸變背景設置動畫

Question

我有一個 HTML 框，其中漸變背景顏色動畫。 漸變背景現在包括 3 colors。 但我想包括所有可用的 colors。 我們可以這樣做嗎？ 請建議，如何做到這一點。 這就是我現在正在做的事情。

background: linear-gradient(57deg, #fdd266, #c33c7a, #595ba8);
background-size: 600% 600%;
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
height: 140px;
border-bottom: none;

Answer 1

你可以嘗試如下

 .box { position: absolute; left: 50%; top: 50%; background: linear-gradient(-45deg, #fdd266, #c33c7a, #595ba8); background-size: 400% 400%; animation: gradient 15s ease infinite; height: 9rem; width:9rem; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

 <div class="box"> here is your box </div>