加林森 发表于 2022-9-6 15:39

梨花笑 （再来复习制作一个）


<br><br><div style="LEFT: -214px; WIDTH: 1024px; POSITION: relative; TOP: 130px">
<div style="float:left;border:solid 1px 000;"><img src="https://pic.imgdb.cn/item/6316f85d16f2c2beb19eb0a4.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 bottom, 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 top, 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=1404722668&auto=1&height=66"></iframe></div><br><br><br><br>

加林森 发表于 2022-9-6 15:39

@马黑黑 @东篱闲人

马黑黑 发表于 2022-9-6 16:16

欣赏队长好作品

加林森 发表于 2022-9-6 16:37

马黑黑 发表于 2022-9-6 16:16
欣赏队长好作品

这个我就无法放播放器进去了。

红影 发表于 2022-9-6 19:54

文字放在人物身上不太合适呢，移动一下位置可能更好点。

加林森 发表于 2022-9-6 20:02

红影 发表于 2022-9-6 19:54
文字放在人物身上不太合适呢，移动一下位置可能更好点。

正在学习。。。

梦缘 发表于 2022-9-6 20:28

漂亮的图，精美的制作，欣赏问好！{:6_234:}

加林森 发表于 2022-9-6 20:35

梦缘 发表于 2022-9-6 20:28
漂亮的图，精美的制作，欣赏问好！

谢谢梦缘！{:4_190:}

东篱闲人 发表于 2022-9-7 10:00

漂亮，处理的四平八稳的。。。。{:4_187:}

东篱闲人 发表于 2022-9-7 10:01

文字和背景色差再大一些更好。。。。{:5_116:}

加林森 发表于 2022-9-7 10:02

东篱闲人 发表于 2022-9-7 10:00
漂亮，处理的四平八稳的。。。。

谢谢老兄啦。{:4_190:}

加林森 发表于 2022-9-7 10:03

东篱闲人 发表于 2022-9-7 10:01
文字和背景色差再大一些更好。。。。

嗯嗯，记住了。下次就知道该怎么做了。

东篱闲人 发表于 2022-9-7 10:04

加林森 发表于 2022-9-7 10:03
嗯嗯，记住了。下次就知道该怎么做了。

{:4_190:}

加林森 发表于 2022-9-7 10:05

东篱闲人 发表于 2022-9-7 10:04


上午好！{:4_190:}

东篱闲人 发表于 2022-9-7 10:07

加林森 发表于 2022-9-7 10:05
上午好！

{:4_174:}

加林森 发表于 2022-9-7 10:08

东篱闲人 发表于 2022-9-7 10:07


上茶：{:4_180:}

小辣椒 发表于 2022-9-7 18:29

队长这个是什么效果？我都没有看见黑黑分享过

加林森 发表于 2022-9-7 19:16

小辣椒 发表于 2022-9-7 18:29
队长这个是什么效果？我都没有看见黑黑分享过

这个是我自己瞎搞的。实际就是老黑的边框教程。
页: [1]
查看完整版本: 梨花笑 （再来复习制作一个）