纯CSS边框渐变动画
一：CSS與圖片參考
<style>
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;
}
}
</style>
?
二：HTML
<body>
<div class="box">
you are my<br> FAVORITE
</div>
</body>
總結
以上是生活随笔為你收集整理的纯CSS边框渐变动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： UE4 自建基础玩家时重力的设置
- 下一篇： CSS 基本样式