小辣椒 发表于 2023-7-30 14:10

月光小夜曲 （学习黑黑管状进度条效果）

<style>
#mydiv { margin: 120px 0 0 calc(50% - 720px); display: grid; place-items: center; width: 1280px; height: 680px; background: lightblue url('https://wj1.zp68.com:812/lxx/yunhua/2022/05/30/yu.gif') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; overflow: hidden; position: relative; z-index: 1; --state: running; }
#mydiv::before,#mydiv::after { position: absolute; left: 450px; top: 400px; content: url('https://wj.zp68.com/lxx/yunhua/2023/07/30/xyu.jpg'); mix-blend-mode: screen; offset-path: path('M60,120 L300,200');animation: move 30s var(--delay) infinite var(--state); --delay: 0s; }
#mydiv::after { --delay: -15s; }
@keyframes move { from {offset-distance: 0%; transform: rotate(0deg); } to { offset-distance: 100%; transform: rotate(720deg); } }
</style>

<div id="mydiv"></div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2023/07/30/03_clip.mp3" autoplay loop></audio>

<script>
(function() {
    let script = document.createElement('script');
    script.src = 'https://wj.zp68.com/lxx/yunhua/2023/07/30/tube_lrc.js';
    document.head.appendChild(script);

    window.onload = () => {
      HCPlayer({
            papa: '#mydiv',
         lrcAr: [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,],
      });
    };
})();
</script>

小辣椒 发表于 2023-7-30 14:11

@马黑黑
玩这种代码少了很多，而且我发现出来很快的{:4_199:}

小辣椒 发表于 2023-7-30 14:12

谢谢黑黑的教程分享{:4_187:}

醉美水芙蓉 发表于 2023-7-30 14:30

梦油 发表于 2023-7-30 14:37

太美了，太美了！在这里又欣赏到旋律简洁明快，清新脱俗的小夜曲，这真是一种高雅的艺术享受，谢谢小辣椒朋友。分享了。

小辣椒 发表于 2023-7-30 14:47

醉美水芙蓉 发表于 2023-7-30 14:30
欣赏辣椒美女佳作！

谢谢水芙蓉欣赏{:4_171:}

小辣椒 发表于 2023-7-30 14:50

梦油 发表于 2023-7-30 14:37
太美了，太美了！在这里又欣赏到旋律简洁明快，清新脱俗的小夜曲，这真是一种高雅的艺术享受，谢谢小辣椒朋 ...

梦油过奖了，这首小夜曲确实特别好听，我都玩了N次的，这个也是旧图，今天重新学习做了黑黑老师的教程分享

梦油 发表于 2023-7-30 15:14

小辣椒 发表于 2023-7-30 14:50
梦油过奖了，这首小夜曲确实特别好听，我都玩了N次的，这个也是旧图，今天重新学习做了黑黑老师的教程分 ...

小辣椒朋友下午好！我很喜欢这支月光小夜曲。

马黑黑 发表于 2023-7-30 15:47

小辣椒 发表于 2023-7-30 14:11
@马黑黑
玩这种代码少了很多，而且我发现出来很快的

对，做帖会方便一点，可以将精力更多用于其他方面

山里人 发表于 2023-7-30 16:16

很给力

红影 发表于 2023-7-30 18:49

那小于鱼儿很灵动，背景的氛围也极美。欣赏亲爱的好帖，撒哈拉的雨收礼开心{:4_187:}

花飞飞 发表于 2023-7-30 20:06

特别喜欢这么灵动静谧的月夜~~{:4_187:}

小辣椒 发表于 2023-8-1 13:50

梦油 发表于 2023-7-30 15:14
小辣椒朋友下午好！我很喜欢这支月光小夜曲。

谢谢梦油喜欢，我也是很喜欢的{:4_189:}

小辣椒 发表于 2023-8-1 13:53

马黑黑 发表于 2023-7-30 15:47
对，做帖会方便一点，可以将精力更多用于其他方面

就感觉做帖方便，黑黑的教程这个我就把小鱼路径改了一下，感觉和图图特别的融合，好美的{:4_189:}

小辣椒 发表于 2023-8-1 13:53

山里人 发表于 2023-7-30 16:16
很给力

谢谢山里人的欣赏{:4_187:}

小辣椒 发表于 2023-8-1 13:55

红影 发表于 2023-7-30 18:49
那小于鱼儿很灵动，背景的氛围也极美。欣赏亲爱的好帖，撒哈拉的雨收礼开心

这个就是套用黑黑的代码，小鱼我只是修改了黑黑羽毛的路径，感觉在河水里面就用这个相配

小辣椒 发表于 2023-8-1 13:57

花飞飞 发表于 2023-7-30 20:06
特别喜欢这么灵动静谧的月夜~~

哈哈~~飞飞我也是特别喜欢这个蓝色的大月亮背景，这个图图是旧图，现在都用旧图，少用眼了

红影 发表于 2023-8-1 16:19

小辣椒 发表于 2023-8-1 13:55
这个就是套用黑黑的代码，小鱼我只是修改了黑黑羽毛的路径，感觉在河水里面就用这个相配

这个路径的设置也挺棒，总体的场景好美{:4_199:}

梦油 发表于 2023-8-1 16:49

小辣椒 发表于 2023-8-1 13:50
谢谢梦油喜欢，我也是很喜欢的

看来，我们还有一些近似的爱好。

马黑黑 发表于 2023-8-1 19:42

小辣椒 发表于 2023-8-1 13:53
就感觉做帖方便，黑黑的教程这个我就把小鱼路径改了一下，感觉和图图特别的融合，好美的

自我感觉良好
页: [1] 2
查看完整版本: 月光小夜曲 （学习黑黑管状进度条效果）