CSS+HTML：流动边框

马黑黑 · 发表于 2022-9-2 13:19

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2022-9-2 13:19

代码：

<style>
#mama { margin: 50px auto 0; width: 400px; height: 400px; border: 1px solid #ccc; overflow: hidden; position: relative; }
.borderLine { position: absolute; animation: flow 4s var(--delay) linear infinite; }
.bl1 { --xx: 200%; --yy: 0%; --delay: 0s; width: 100%; height: 4px; left: -100%; top: 0; background: linear-gradient(to right, red, tan, gold,olive, tomato); }
.bl2 { --xx: 0%; --yy: 200%; --delay: 2s; width: 4px; height: 100%; right: 0; top: -100%; background: linear-gradient(to top, red, tan, gold,olive, tomato); }
.bl3 { --xx: -200%; --yy: 0%; --delay: 4s; width: 100%; height: 4px; right: -100%; bottom: 0; background: linear-gradient(to left, red, tan, gold,olive, tomato); }
.bl4 { --xx: 0%; --yy: -200%; --delay: 6s; width: 4px; height: 100%; left: 0; bottom: -100%; background: linear-gradient(to bottom, red, tan, gold,olive, tomato); }
@keyframes flow { to { transform: translate(var(--xx), var(--yy)); } }
</style>
<div id="mama">
<span class="borderLine bl1"></span>
<span class="borderLine bl2"></span>
<span class="borderLine bl3"></span>
<span class="borderLine bl4"></span>
</div>

复制代码

马黑黑 · 发表于 2022-9-2 13:27

实际上，是在一个正方形内部一次部署四个 span 标签，上下尺寸为 100% * 4px、左右尺寸为 4px * 100%，并使用 left、top、right、bottom 将四个 span 物理定位到四个边缘的外围（例如，上边的 span，整体在左上角往左，由于 #mama 设置 overflow: hidden，不可见；右边的 span 位于右上角往上，下边的 span 位于右下角往左，左边的 span 位于左下角往下）。

然后通过 @keyframes 关键帧动画，按一定延时移动，走完半圈后就出现对称的双边流动效果。