论坛 › 音乐沙龙 › 沙漠胡杨（学习黑黑《烟雨》代码效果）

红影 发表于 2024-12-7 21:23

沙漠胡杨（学习黑黑《烟雨》代码效果）

<style>
        @import 'https://638183.freep.cn/638183/web/mod/ccpp_lrc.css';
        #tz { margin: 60px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://pic.imgdb.cn/item/675408c2d0e0a243d4df591b.jpg') no-repeat center/cover; overflow: hidden; border-radius: 16px; }
        #mplayer { --tx: 0; --ppNum: 84; --ppBg: darkorange; --ppLen: 1px; --ppCap: orange; --prog: red; --track: silver; bottom: 180px; color: gold; left: 16%; top: 30%; }
        #pic1 { position: absolute; bottom: 9%; right: 28%; width: 420px; height: 252px; transform-origin: 50%100%; opacity: 0.95; animation: luotuo 2.6s linear infinite alternate var(--state); }
        #mplayer:hover { filter: hue-rotate(320deg); }
        #fsbtn { bottom: 20px; color: orange; border-color: orange; }
        .vid {width: 100%; }
    .vid:nth-of-type(1) { top: -65px; height: calc(100% + 120px); }
    .vid:nth-of-type(2) { left: 80%; top: 3%; width: 240px; height: 240px; border-radius: 50%; -webkit-mask: radial-gradient(red 20%, transparent); opacity: 0.35; }
        @keyframes luotuo { to { transform: skew(5.5deg) translateY(30px);} }
</style>

<div id="tz" class="pa">
        <audio src="https://music.163.com/song/media/outer/url?id=2630551620"></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bc0dd9681b_10s_big.mp4" autoplay loop muted></video>
        <video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/05/5b4ff29c83863_10s_big.mp4" autoplay loop muted></video>
      <img id="pic1" src="https://pic.imgdb.cn/item/675411d8d0e0a243d4df6ac0.png" alt="" />
        <div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
        import { hcplay } from 'https://638183.freep.cn/638183/web/mod/ccpp_lrc.js';
        import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
        hcplay(tz);
        fscreen.fs(tz, fsbtn);
</script>

红影 发表于 2024-12-7 21:25

坚韧的胡杨，坚韧的沙漠旅人，千百年的风沙里的穿行。。。。
本来想首刀郎的《喀什噶尔胡杨》，不让分享，正好找到这首同名曲子，感觉也不错{:4_173:}

红影 发表于 2024-12-7 21:28

原本的鼠标触碰颜色变化太夸张了，改成稍微变化点；
想找个骑骆驼的动图也没找到，索性就代码的动吧，更好控制。
看到个钟视频的视频觉得挺好，也用进去了，正好学习一下多视频一起用。

全都能暂停时控制呢，这个代码太好了，谢谢@马黑黑 {:4_187:}

红影 发表于 2024-12-7 21:30

这个图里本来有个骑骆驼的人，被我弄掉了，换了个图进去，便于动，就让它一直跋涉吧{:4_173:}

马黑黑 发表于 2024-12-7 21:30

完美制作。赞

起个网名好难 发表于 2024-12-7 21:44

红影 发表于 2024-12-7 21:25
坚韧的胡杨，坚韧的沙漠旅人，千百年的风沙里的穿行。。。。
本来想首刀郎的《喀什噶尔胡杨》，不让分享， ...

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

骑骆驼骑出了海上航行的感觉

红影 发表于 2024-12-7 21:47

马黑黑 发表于 2024-12-7 21:30
完美制作。赞

谢谢黑黑，发现这个封装真的很美的{:4_187:}

红影 发表于 2024-12-7 21:47

起个网名好难 发表于 2024-12-7 21:44
骑骆驼骑出了海上航行的感觉

哈哈，是那视频衬托的吧，你把那当沙海，一样的{:4_170:}

马黑黑 发表于 2024-12-7 22:21

红影 发表于 2024-12-7 21:47
谢谢黑黑，发现这个封装真的很美的

使用得当更美

红影 发表于 2024-12-7 22:56

马黑黑 发表于 2024-12-7 22:21
使用得当更美

使用还很方便，真的太好了{:4_199:}

马黑黑 发表于 2024-12-7 23:18

红影 发表于 2024-12-7 22:56
使用还很方便，真的太好了

可能不存在比这个更简洁的封装了

秋思梦景 发表于 2024-12-8 07:43

问候老师好！精美音画佳作，精心制作分享！为您点赞！祝您学习！{:4_187:}{:5_116:}

小文 发表于 2024-12-8 09:00

高端大气上档次，为恩师点个大大的赞！{:4_204:}{:4_178:}

红影 发表于 2024-12-8 10:32

马黑黑 发表于 2024-12-7 23:18
可能不存在比这个更简洁的封装了

黑黑是独此一份，给想学代码的坛友带来了太大的便利了{:4_199:}

红影 发表于 2024-12-8 10:32

秋思梦景 发表于 2024-12-8 07:43
问候老师好！精美音画佳作，精心制作分享！为您点赞！祝您学习！

谢谢秋思梦景的鼓励，看到您的周日祝福帖子了，也祝福您周日快乐{:4_187:}

红影 发表于 2024-12-8 10:33

小文 发表于 2024-12-8 09:00
高端大气上档次，为恩师点个大大的赞！

谢谢小文，又是跟在后面学着玩的，和小文艺术作品没法比的{:4_173:}

小文 发表于 2024-12-8 11:05

红影 发表于 2024-12-8 10:33
谢谢小文，又是跟在后面学着玩的，和小文艺术作品没法比的

先给恩师请个安！回头再来欣赏美图。好喜欢的！真的美！

流水光阴 发表于 2024-12-8 12:10

一看就是高手的，老师你太厉害了{:4_199:}

马黑黑 发表于 2024-12-8 12:34

红影 发表于 2024-12-8 10:32
黑黑是独此一份，给想学代码的坛友带来了太大的便利了

客气客气

小辣椒 发表于 2024-12-8 16:49

亲爱的，太棒了，这个完全的同色系制作，精彩至极了{:4_178:}

查看完整版本: 沙漠胡杨（学习黑黑《烟雨》代码效果）