梦江南 发表于 2024-11-5 17:34

杀破狼—《仙剑奇侠传》主题曲 ，学习黑黑老师的三车套代码

本帖最后由 梦江南 于 2024-11-6 09:25 编辑 <br /><br /><style>
        #mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/672ac548d29ded1a8c46e5b6.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; --state: running; }
        #msvg { position: absolute; left: calc(50% - 100px); top: 80px; cursor: pointer; animation: rot 10s linear infinite var(--state); }
        #msvg:hover polyline { transition: 1s; fill: darkred; stroke: hotpink; }
        #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 50%, red); pointer-events: none; }
        #fsbtn { position: absolute; left: 20px; bottom: 15px; color: white; background: steelblue; padding: 4px 6px; border: 2px solid snow; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
        @keyframes rot { to { transform: rotate(-360deg); } }
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1381434356" autoplay loop></audio>
        <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/06/27/15/38/31/video667d16f79d83a.mp4" autoplay loop muted></video>
        <svg id="msvg" width="260" height="260" viewBox="-100 -100 200 200"></svg>
        <span id="fsbtn"></span>
</div>

<scripttype="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr('msvg');

var tt = 17;
for(var i = 0; i < tt; i ++) {
        dr.polyline('0 0,70 0,70 -10,85 -10,85 10,70 10,70 0', 'hotpink', 'darkred', 3).transform(`rotate(${360/tt*i}) translate(6)`);
}

msvg.onclick = () => {
        msvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
        aud.paused ? (aud.play(), vid.play()) : (aud.pause(), vid.pause());
};

fscreen.fs('mydiv', 'fsbtn');

aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
</script>

起个网名好难 发表于 2024-11-5 18:08

欣赏美帖！

红影 发表于 2024-11-5 20:45

江南的制作真快，而且小播放的位置很有趣，正好在手上。
欣赏江南好帖{:4_199:}

红影 发表于 2024-11-5 20:46

那个女子的身上怎么有几个文字，什么下载后什么的，这个应该能去掉的吧{:4_173:}

梦江南 发表于 2024-11-6 09:26

起个网名好难 发表于 2024-11-5 18:08
欣赏美帖！

早上好，谢谢老师沙发支持。{:4_204:}

梦江南 发表于 2024-11-6 09:30

红影 发表于 2024-11-5 20:45
江南的制作真快，而且小播放的位置很有趣，正好在手上。
欣赏江南好帖

问好影子，这个小播放的位置是有意放在手心上的，好像他想把它推出去，加了二个小方块。{:4_187:}

梦江南 发表于 2024-11-6 09:36

红影 发表于 2024-11-5 20:46
那个女子的身上怎么有几个文字，什么下载后什么的，这个应该能去掉的吧

下载时忘记了，现在已经把她擦干净了。{:4_187:}

红影 发表于 2024-11-6 23:04

梦江南 发表于 2024-11-6 09:30
问好影子，这个小播放的位置是有意放在手心上的，好像他想把它推出去，加了二个小方块。

这个构思十分好，给江南点赞{:4_187:}

红影 发表于 2024-11-6 23:04

梦江南 发表于 2024-11-6 09:36
下载时忘记了，现在已经把她擦干净了。

江南辛苦了{:4_204:}

梦江南 发表于 2024-11-7 07:49

红影 发表于 2024-11-6 23:04
这个构思十分好，给江南点赞

早上问好，谢谢鼓励。{:4_187:}

梦江南 发表于 2024-11-7 07:51

红影 发表于 2024-11-6 23:04
江南辛苦了

应该的，这是对帖子的基本要求。{:4_204:}

秋思梦景 发表于 2024-11-7 08:32

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

梦江南 发表于 2024-11-7 08:37

秋思梦景 发表于 2024-11-7 08:32
问候老师好！精美音画佳作，精心制作分享。为您点赞！向您学习！

问好梦景老师，谢谢支持鼓励！{:4_187:}

红影 发表于 2024-11-7 15:45

梦江南 发表于 2024-11-7 07:49
早上问好，谢谢鼓励。

客气了，江南做得好，欣赏学习本来就是应该的{:4_187:}

红影 发表于 2024-11-7 15:45

梦江南 发表于 2024-11-7 07:51
应该的，这是对帖子的基本要求。

被江南处理得很干净呢{:4_187:}
页: [1]
查看完整版本: 杀破狼—《仙剑奇侠传》主题曲 ，学习黑黑老师的三车套代码