东篱闲人 发表于 2022-9-3 19:48

枉凝眉

本帖最后由 东篱闲人 于 2022-9-4 13:13 编辑 <br /><br /><br><br><div style="LEFT: -400px; WIDTH: 1400px; POSITION: relative; TOP: 130px">
<div style="float:left;border:solid 1px 000;"><img src="https://pic.imgdb.cn/item/63133e4016f2c2beb1026fbc.jpg"></div>
<style>
      #mama { margin: 50px auto 0; width: 400px; height: 400px; top: -700px;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: 0px; 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>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=1 height=1 src="//music.163.com/outchain/player?type=2&id=159401&auto=1&height=66"></iframe></div><br><br><br><br>

加林森 发表于 2022-9-3 20:00

跟到转。{:4_199:}

梦缘 发表于 2022-9-3 20:21

精美的作品，欣赏老师的精彩分享，问好！{:4_187:}

绿叶清舟 发表于 2022-9-3 20:24

连着转不怕晕啊{:4_189:}

东篱闲人 发表于 2022-9-3 20:38

加林森 发表于 2022-9-3 20:00
跟到转。

注意身体。。。。{:4_189:}

东篱闲人 发表于 2022-9-3 20:39

梦缘 发表于 2022-9-3 20:21
精美的作品，欣赏老师的精彩分享，问好！

谢谢梦缘。。。{:4_190:}

东篱闲人 发表于 2022-9-3 20:39

绿叶清舟 发表于 2022-9-3 20:24
连着转不怕晕啊

快迷糊了。。。。{:4_170:}

醉美水芙蓉 发表于 2022-9-3 20:40

东篱闲人 发表于 2022-9-3 20:52

醉美水芙蓉 发表于 2022-9-3 20:40
东篱老师做图好快！

没啥水准，乱做就快。。。{:5_117:}

加林森 发表于 2022-9-3 21:21

东篱闲人 发表于 2022-9-3 20:38
注意身体。。。。

知道知道

东篱闲人 发表于 2022-9-3 21:22

加林森 发表于 2022-9-3 21:21
知道知道

别把老腰转坏。。。。{:5_117:}

加林森 发表于 2022-9-3 21:28

东篱闲人 发表于 2022-9-3 21:22
别把老腰转坏。。。。

现在头转晕了。。。。{:4_189:}

红影 发表于 2022-9-3 21:33

流转框定位特别准确，非常棒。欣赏东篱大哥好帖{:4_187:}

东篱闲人 发表于 2022-9-3 21:48

红影 发表于 2022-9-3 21:33
流转框定位特别准确，非常棒。欣赏东篱大哥好帖

喝水。。。。{:4_190:}

红影 发表于 2022-9-3 22:16

东篱闲人 发表于 2022-9-3 21:48
喝水。。。。

又是喝水啊，不行，我要换酒{:4_173:}

东篱闲人 发表于 2022-9-3 22:20

红影 发表于 2022-9-3 22:16
又是喝水啊，不行，我要换酒

没有酒。喝水。。。。。{:4_180:}

红影 发表于 2022-9-3 22:37

东篱闲人 发表于 2022-9-3 22:20
没有酒。喝水。。。。。

不喝了，都这么晚了{:4_170:}

马黑黑 发表于 2022-9-3 22:39

2、2对换一下 top，bottom，线条拐弯时无缝衔接

东篱闲人 发表于 2022-9-4 10:13

红影 发表于 2022-9-3 22:37
不喝了，都这么晚了

{:5_117:}

小辣椒 发表于 2022-9-4 12:15

老头作业完成非常好，小辣椒都没有做过这个效果
页: [1] 2
查看完整版本: 枉凝眉