原文地址：https://segmentfault.com/a/1190000014785816

感想：边框是伪元素::after来的；

HTML代码：

<div class="box"> you are my<br> FAVORIFE</div>

CSS代码：

html, body,.box { margin: 0; padding: 0; height: 100%; display: flex; justify-content: center; align-items: center;}body{ background: #222;}.box{ width: 10em; height: 5em; border-radius: 0.2em; line-height: 1.5em; font-size: 2.5em; /* 字体系列：无衬线；*/ font-family: sans-serif; color: white; background: #111; position: relative; animation: animate_text 2s linear infinite alternate;}@keyframes animate_text{ from{ color: lime; } to{ color: yellow; }}/* 用伪圆增加一个背板 */.box::after{ content: ‘‘; position: absolute; width: 102%; height: 104%; background-image: linear-gradient(60deg, aquamarine, cornflowerblue, goldenrod, hotpink, salmon, lightgreen, sandybrown, violet); background-size: 300%; border-radius: 0.2em; z-index: -1; animation: animate_bg 5s infinite;}@keyframes animate_bg{ 0%{ background-position: 0%, 50%; } 50%{ background-position: 100%, 50%; } 100%{ background-position: 0%, 50%; }}