冬天的雨 发表于 2024-11-12 13:55

倔强的骨头 (Live合唱版) - 小梁的


<style>
        #mydiv { margin: 130px 0 30px calc(50% - 801px); width: 1440px; height: 778px; background: url('https://file.uhsea.com/2411/7957d1d48bc597a599d67a931dd53fcd6P.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; position: relative; --state: running; }
        #msvg { position: absolute; left: calc(50% - 100px); top: 40px; 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 75%, red); pointer-events: none; }
        #fsbtn { position: absolute; left: 50%; bottom: 15px; color: white; background: Cornislk; 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://file.uhsea.com/2411/84e1e546dad19c46308a424a86050b9fBA.mp3" autoplay loop></audio>
        <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_preview/20/11/10/15/34/31/video5faa42876fc28.mp4" autoplay loop muted></video>
        <svg id="msvg" width="200" height="200" 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 = 15;
for(var i = 0; i < tt; i ++) {
        dr.polyline('0 0,70 0,70 -10,85 -10,85 10,70 10,70 0', 'darkred', '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>

liumang 发表于 2024-11-12 20:51

冬雨辛苦，今天一下子发了4个帖，个个图图精彩{:5_150:}

liumang 发表于 2024-11-12 20:52

冬雨的音乐都是小辣椒给你的吧{:5_152:}{:5_152:}

liumang 发表于 2024-11-12 20:53

冬雨这图背景溶图真漂亮，鸟飞特效加的特别好{:5_150:}

liumang 发表于 2024-11-12 20:54

感谢冬雨这支持微风{:5_124:}

小辣椒 发表于 2024-11-14 13:57

问好冬雨，欣赏来迟，非常高兴看见你{:5_116:}

冬天的雨 发表于 2024-11-24 16:27

小辣椒 发表于 2024-11-14 13:57
问好冬雨，欣赏来迟，非常高兴看见你

小辣椒好，感谢欣赏{:5_150:}

冬天的雨 发表于 2024-11-24 16:27

liumang 发表于 2024-11-12 20:54
感谢冬雨这支持微风

客气了，冬雨玩的时间少，所以难得上来发帖

冬天的雨 发表于 2024-11-24 16:28

小辣椒 发表于 2024-11-14 13:57
问好冬雨，欣赏来迟，非常高兴看见你

谢谢小辣椒介绍的音乐，很喜欢的
页: [1]
查看完整版本: 倔强的骨头 (Live合唱版) - 小梁的