前端日常实战：34#视频演示了如何使用纯CSS创建在文本之间来回穿梭的边框
时间：2023-04-05 01:06:42
HTML5
预览效果按右侧“点击预览”按钮可在当前页面预览，点击链接可全屏预览。https://codepen.io/comehop??e/pen/qYepNv交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cQ73Vt8源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-challenges代码解释定义dom，容器包含文本：ERROR404
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:rgb(20%,20%,20%);}定义文本样式：.warning{color:whitesmoke;字体大小：100px；字体系列：无衬线；font-weight:bold;}伪元素定义边框大小:.warning{position:relative;padding:0.6em0.4em;}.warning::before,.warning::after{content:'';位置：绝对；顶部：0；左：0；宽度：100%；高度：100%；边框：0.2em实心；box-sizing:border-box;}把边框分成两部分放在一起：.warning::before,.warning::after{border:0.2emsolidtransparent;颜色：橙色；}.warning::before{border-top-color:currentColor;border-right-color:currentColor;}.warning::after{border-bottom-color:currentColor;t-color:currentColor;}上下边框下沉:.warning::before{z-index:-1;}给下边框和边框添加阴影:.warning::after{box-shadow:0.3em0.3em0.3emrgba(20%,20%,20%,0.8);}最后让帧旋转：.warning::before,.warning::after{animation:rotating10sinfinite;}@keyframesrotating{to{变换：旋转（360度）；}}你完成了！
