伙計們請幫我解決這個問題。如您所見，此按鈕的背面正在實時著色。無需點擊它或懸停在它上面。我怎樣才能用 html 和 css 做到這一點？我想我需要 JavaScript 或 SVG 。視頻鏈接在這里：' https ://amirmora801.wistia.com/projects/ryy7wy74ls '
uj5u.com熱心網友回復：
嘗試這個 ：
網頁格式：
* {
box-sizing: border-box;
}
html,body {
padding: 0;
margin: 0;
margin-top: 20px;
background: #000;
display: flex;
justify-content: center;
}
/* HERE STARTS THE CODE FOR CIRCLE GRADIENT */
.container {
width: 400px;
height: 150px;
background: red;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg,
#ff0000,
#ff9900,
#eeff00,
#00ff2a,
#1100ff,
#d700f3,
#00f320,
#b40c00,
#ffd901,
#f3003d);
background-size: 400%;
animation: animate 5s linear infinite;
}
.inner {
width: 390px;
height: 140px;
background: black;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
}
.inner h1 {
margin: 0;
color: white;
font-size: 40px;
}
/* Keyframes doing the animation */
/* If you want to make it animate faster, make the "5s" less -(seconds) */
@keyframes animate {
0% {
background-position: 0%;
}
100% {
background-position: 400%;
}
}<div class="container">
<div class="inner">
<h1>Gradient Animation</h1>
</div>
</div>你可以在沒有js的情況下創建它。
去試試這個！一個例子：https ://codepen.io/MJ-Media/pen/yZyPJy “點擊這里查看實體”
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/535189.html
標籤：网页格式CSS