CSS+HTML：流动边框

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

马黑黑 发表于 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 关键帧动画，按一定延时移动，走完半圈后就出现对称的双边流动效果。

马黑黑 发表于 2022-9-2 13:28

要求必须运行与正方形的矩形之上，否则延时很难计算，其他的设置也很复杂。

马黑黑 发表于 2022-9-2 13:30

效果看上去是线条会拐弯，其实不是，是各条线各走各的路，超出部分被剪裁了而已

红影发表于 2022-9-2 14:13

马黑黑发表于 2022-9-2 13:30
效果看上去是线条会拐弯，其实不是，是各条线各走各的路，超出部分被剪裁了而已

很聪明的做法，很赞{:4_199:}

红影发表于 2022-9-2 14:14

这个漂亮，渐变流动边框，太美了{:4_199:}

梦缘发表于 2022-9-2 16:27

感谢老师分享代码，欣赏学习，问好！{:4_171:}

上海朝阳 发表于 2022-9-2 19:10

红影发表于 2022-9-2 14:14
这个漂亮，渐变流动边框，太美了

快把你的诗放进去

马黑黑 发表于 2022-9-2 19:15

梦缘发表于 2022-9-2 16:27
感谢老师分享代码，欣赏学习，问好！

{:4_190:}

马黑黑 发表于 2022-9-2 19:15

红影发表于 2022-9-2 14:13
很聪明的做法，很赞

还有更聪明的做法，用图片转圈圈的方式，图片需要设置一下

马黑黑 发表于 2022-9-2 19:16

上海朝阳发表于 2022-9-2 19:10
快把你的诗放进去

也可以放你的歌{:4_173:}

马黑黑 发表于 2022-9-2 19:16

红影发表于 2022-9-2 14:14
这个漂亮，渐变流动边框，太美了

过得去

绿叶清舟 发表于 2022-9-2 19:33

一动尺寸得改一大堆的吧，看着就头疼了

马黑黑 发表于 2022-9-2 19:34

绿叶清舟发表于 2022-9-2 19:33
一动尺寸得改一大堆的吧，看着就头疼了

设计好的，只需修改 #mama 的高宽（二者要一致）

千羽发表于 2022-9-2 20:27

马黑黑发表于 2022-9-2 13:28
要求必须运行与正方形的矩形之上，否则延时很难计算，其他的设置也很复杂。

简洁又唯美，{:4_187:}

千羽发表于 2022-9-2 20:27

本帖最后由千羽于 2022-9-2 20:28 编辑 <br /><br /><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>

挺有趣味性{:4_199:}

红影发表于 2022-9-2 20:37

上海朝阳发表于 2022-9-2 19:10
快把你的诗放进去

哈哈，朝阳大哥也在动脑筋怎样去用这些效果了{:4_173:}

红影发表于 2022-9-2 20:39

马黑黑发表于 2022-9-2 19:15
还有更聪明的做法，用图片转圈圈的方式，图片需要设置一下

那个没看到，只看到黑黑的聪明了{:4_187:}

马黑黑 发表于 2022-9-2 21:04

红影发表于 2022-9-2 20:39
那个没看到，只看到黑黑的聪明了

我做完这个之后，去查一下别人怎么做这类东东，就看到有图片旋转的

页: [1] 2

花潮论坛's Archiver

CSS+HTML：流动边框