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; } }
更新时间:2019-08-18 11:22:54