原文地址： https://segmentfault.com/a/1190000015045700
感想： 动画 + z-index:n ;
HTML code：
<div class="warning">ERROR 404</div>
CSS code:
html, body { ???margin: 0; ???padding: 0; ???height: 100vh; ???display: flex; ???justify-content: center; ???align-items: center; ???background-color: rgb(20%, 20%, 20%);}.warning{ ???position: relative; ???padding: 0.6em 0.4em; ???/* border: 1px solid red; */ ???/* 定义文字样式 */ ???color: whitesmoke; ???font-size: 50px; ???font-family: sans-serif; ???font-weight: bold; ???z-index: 1;}/* 用伪元素定义边框尺寸 */.warning::before,.warning::after{ ???position: absolute; ???top: 0; ???left: 0; ???content: ‘‘; ???width: 100%; ???height: 100%; ???border: 0.2em solid transparent; ???box-sizing: border-box; ???color: orangered; ???animation: rotating 10s infinite;}@keyframes rotating{ ???to{ ???????transform: rotate(360deg); ???}}.warning::before{ ???border-top-color: currentColor; ???border-right-color: currentColor; ???/* 使其显示级数降级一点 */ ???z-index: -1;}.warning::after{ ???border-bottom-color: currentColor; ???border-left-color: currentColor; ???/* 加阴影 */ ???box-shadow: 0.3em 0.3em 0.3em rgba(20%, 20%, 20%, 0.8);}34.纯 CSS 创作在文本前后穿梭的边框
原文地址：https://www.cnblogs.com/FlyingLiao/p/10348581.html