html边框样式 渐变,纯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;

position:relative;

animation:animate_text 2s linear infinite alternate;

}

.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;

}

}