东篱闲人 发表于 2022-9-3 13:30

茶禅一味

本帖最后由 东篱闲人 于 2022-9-3 20:53 编辑 <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/6312e50416f2c2beb19f86de.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=1925823406&auto=1&height=66"></iframe></div><br><br><br><br>

加林森 发表于 2022-9-3 13:35

阿弥陀佛，善哉善哉！{:5_161:}

东篱闲人 发表于 2022-9-3 13:35

加林森 发表于 2022-9-3 13:35
阿弥陀佛，善哉善哉！

{:4_172:}

加林森 发表于 2022-9-3 13:37

东篱闲人 发表于 2022-9-3 13:35


打坐开始。。。。。{:5_161:}

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

加林森 发表于 2022-9-3 13:37
打坐开始。。。。。

以为你要出家呢。。。。{:5_117:}

加林森 发表于 2022-9-3 13:48

东篱闲人 发表于 2022-9-3 13:38
以为你要出家呢。。。。

品茶开始。。。。{:6_249:}

红影 发表于 2022-9-3 15:18

东篱大哥做了个边框，那个流动转条落在边框上更漂亮呢，很赞{:4_199:}

红影 发表于 2022-9-3 15:20

流动条的颜色和茶汤色相得益彰，禅茶一味，品茶如品人生{:4_187:}

醉美水芙蓉 发表于 2022-9-3 17:48

马黑黑 发表于 2022-9-3 18:41

我发布例子的时候，没注意到线条的衔接，把下面两句中红色的单词对换一下，线条的衔接就会很自然了：

      .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); }

      .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); }

东篱闲人 发表于 2022-9-3 18:50

红影 发表于 2022-9-3 15:18
东篱大哥做了个边框，那个流动转条落在边框上更漂亮呢，很赞

看着人家转，俺也跟着瞎转一个。。。{:5_117:}

东篱闲人 发表于 2022-9-3 18:51

醉美水芙蓉 发表于 2022-9-3 17:48
东篱老师厉害制作一流！

不敢不敢，瞎祸害。。。{:5_117:}

东篱闲人 发表于 2022-9-3 18:55

马黑黑 发表于 2022-9-3 18:41
我发布例子的时候，没注意到线条的衔接，把下面两句中红色的单词对换一下，线条的衔接就会很自然了：

   ...

对换了一下，是这样子。。。。{:4_190:}

马黑黑 发表于 2022-9-3 18:56

东篱闲人 发表于 2022-9-3 18:55
对换了一下，是这样子。。。。

是吧，四个角的线条衔接很自然了

马黑黑 发表于 2022-9-3 18:58

东篱的制作，将一些特效代码用于自己的图片中的技巧巧妙、自然，浑然天成，队长 @加林森 应该来学学。

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

马黑黑 发表于 2022-9-3 18:56
是吧，四个角的线条衔接很自然了

{:4_181:}

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

马黑黑 发表于 2022-9-3 18:58
东篱的制作，将一些特效代码用于自己的图片中的技巧巧妙、自然，浑然天成，队长 @加林森 应该来学学。

它不听话，俺就乱加了一些东西。。。{:5_117:}

马黑黑 发表于 2022-9-3 19:02

东篱闲人 发表于 2022-9-3 19:00
它不听话，俺就乱加了一些东西。。。

很服帖的样纸呢

马黑黑 发表于 2022-9-3 19:02

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


{:4_191:}

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

马黑黑 发表于 2022-9-3 19:02
很服帖的样纸呢

嗯嗯，还算老实。。。{:4_170:}
页: [1] 2 3
查看完整版本: 茶禅一味