原文地址：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%; ???}}16.纯 CSS 创作一个渐变色动画边框
原文地址：https://www.cnblogs.com/FlyingLiao/p/10241519.html