技術標籤：css

開發工具:DW
關鍵技術:CSS

先看效果圖片：
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210206104041246.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RCREJUVU8=,size_16,color_FFFFFF,t_70#pic_center)

漸變動態效果。
在HTML設定基礎樣式
<div class="box">
you are my<br> FAVORITE
</div>
CSS部分：
html,body,.box {
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
body {
background-color:#222;
}
.box{
font-size:2.5em;
width:10em;
height:5em;
background-color:#111;
border-radius:0.5em;
text-align:center;
line-height:1.5em;
font-family:sans-serif;
animation:animate_text 2s linear infinite alternate;
position:relative;
}
.box::before {
content:'';
position:absolute;
width:calc(100% + 10%);
height:calc(100% + 20%);
border-radius:0.5em;
z-index:-1;
background-image:linear-gradient(60deg,aquamarine,cornflowerblue,goldenrod,hotpink,salmon,lightgreen,sandybrown,violet);
background-size:300%;
animation:animate_bg 5s infinite;
}
@keyframes animate_bg {
0%,100% {
background-position:0%,50%;
}
50% {
background-position:100%,50%;
}
}
@keyframes animate_text {
from {
color:lime;
}
to {
color:yellow;
}
}
設定該效果的關鍵程式碼（background-image:linear-gradient(60deg,aquamarine,cornflowerblue,goldenrod,hotpink,salmon,lightgreen,sandybrown,violet);content:'';）設定漸變。
animation:animate_text 2s linear infinite alternate;設定延時
animate_text 設定過渡效果