绿叶清舟 发表于 2024-9-7 22:04

两忘烟水里

<style>
.tiezi {
      margin: 30px 0 30px calc(50% - 731px);
      width: 1280px;
      height: 720px;
      box-sizing: border-box;
      border: 3px solid;
      border-image: linear-gradient(to top right, #d1e4e9, #bed9e1, #78a9c3, #95b9c2) 3 3;
      background: url('https://p.upyun.com/demo/tmp/ZQSIZuuI.webp') no-repeat center/cover;
      z-index: 1;
      pointer-events: none;
      position: relative;
}

#mypic {
      position: absolute; /* 绝对定位 */
      left: 20px; /* 左边位置*/
      top: 580px; /* 上边位置 */
      width: 120px; /* 宽度 */
      height: 120px; /* 高度 */
      /* animation简化语法 ：动画名称+运动周期时长+缓动形式+运行次数 */
      animation: rot 58s linear 3;
}

/* 设计CSS关键帧动画 */
@keyframes rot {
      from { transform:translate(0px); } /* 从 0 度开始旋转 */
      to { transform:translate(1180px); } /* 到 360 度即一圈完成一个旋转周期 */
}
</style>

<div class="tiezi" id="tzi">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2080659326" autoplay loop></audio>
<img id="mypic" alt="" src="https://p.upyun.com/demo/tmp/V6drffz0.webp" />
</div>

<script>
aud.ontimeupdate = () => tzi.style.setProperty('--hue', Math.floor(Math.random() * 80) + 'deg');
tzi.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

彩云归 发表于 2024-9-8 06:46

精美！谢谢分享！

梦江南 发表于 2024-9-8 07:14

欣赏老师佳作，问好！

醉美水芙蓉 发表于 2024-9-8 07:29

世外桃源 发表于 2024-9-8 11:06

欣赏欣赏

樵歌 发表于 2024-9-8 12:32

俩忘烟水里，何处是吾家。{:4_189:}

梦油 发表于 2024-9-8 16:41

画面中游动的小舟给整个作品曾练了色彩。

小辣椒 发表于 2024-9-8 17:38

清舟这个效果我感觉是黑黑小白代码里面的作业？

小辣椒 发表于 2024-9-8 17:41

清舟的图图的标题字漂亮，图图配色也是大胆的，上图黄色和緑的也是很相配{:4_199:}

小辣椒 发表于 2024-9-8 17:42

粤语歌好听~~{:4_208:}

绿叶清舟 发表于 2024-9-8 20:56

小辣椒 发表于 2024-9-8 17:38
清舟这个效果我感觉是黑黑小白代码里面的作业？

辣椒看出来了啊，那里发了怕乱了版面就来这里了{:4_189:}

绿叶清舟 发表于 2024-9-8 20:56

彩云归 发表于 2024-9-8 06:46
精美！谢谢分享！

谢谢彩云归，晚上好

绿叶清舟 发表于 2024-9-8 20:57

梦江南 发表于 2024-9-8 07:14
欣赏老师佳作，问好！

谢谢江南，晚上好

绿叶清舟 发表于 2024-9-8 20:57

醉美水芙蓉 发表于 2024-9-8 07:29
欣赏清舟好帖！

谢谢芙蓉

绿叶清舟 发表于 2024-9-8 20:57

世外桃源 发表于 2024-9-8 11:06
欣赏欣赏

谢谢世外支持

绿叶清舟 发表于 2024-9-8 20:58

樵歌 发表于 2024-9-8 12:32
俩忘烟水里，何处是吾家。

船上就是家{:4_189:}

四海八荒 发表于 2024-9-9 06:11

樵歌 发表于 2024-9-8 12:32
俩忘烟水里，何处是吾家。

船上{:4_189:}

红影 发表于 2024-9-9 11:07

这字体太美了，好像也融在烟水里了。
清舟的背景制作总是那么美{:4_199:}

樵歌 发表于 2024-9-9 12:22

绿叶清舟 发表于 2024-9-8 20:58
船上就是家

台风来了怎么办{:4_173:}

樵歌 发表于 2024-9-9 12:23

四海八荒 发表于 2024-9-9 06:11
船上

和作者保持高度的一致{:4_173:}
页: [1] 2
查看完整版本: 两忘烟水里