论坛 › 音乐沙龙 › 《误入迷失森林》（学习黑黑 Entropy代码效果）

红影 发表于 2024-10-11 22:13

《误入迷失森林》（学习黑黑 Entropy代码效果）

<style>
#tz {
        margin: 60px 0 30px calc(50% - 730px);
        width: 1280px;
        height: 700px;
        background: url('https://pic.imgdb.cn/item/67092409d29ded1a8cd70e08.jpg') no-repeat center/115% 115%;
        box-shadow: 3px 3px 6px rgba(0,0,0,.6);
        overflow: hidden;
        z-index: 1;
        display: grid; place-items: center;
        animation: chgsize 4s linear alternate infinite var(--state);
        position: relative;
}
#vid {
        position: absolute;
        width: 100%;
        height: calc(100% + 60px);
        top: -60px; opacity: 0.65;
        object-fit: cover;
        mix-blend-mode: screen;
        pointer-events: none;
}
#player {
        position: absolute;
        left: calc(50% - 140px);
        top: calc(50% - 100px);
        cursor: pointer;
        animation: rot 10s linear infinite var(--state);
}
use:nth-child(odd) { --bg: DeepSkyBlue; }
use:nth-child(even) { --bg: cyan; }
@keyframes rot {
        to { transform: rotate(360deg); filter: hue-rotate(40deg); }
}
@keyframes chgsize { to { background-size: 100% 100%; } }
</style>

<div id="tz">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2104288604" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/13928806/00/41/16/600e82baca629_10s_big.mp4" autoplay loop muted></video>
        <svg id="player" width="320" height="320" viewBox="0 0 200 200">
                <title id="tt">播放/暂停</title>
                <defs>
                        <g id="p1" fill="none" stroke="var(--bg)" stroke-width="3" stroke-linecap="round" stroke-dasharray="4 6">
                                <path id="p1" d="M10 100 Q50 270,100 100 T 190 100">
                                        <animate attributeName="stroke-dashoffset" from="80" to="0" dur="2s" repeatCount="indefinite" />
                                </path>
                        </g>
                </defs>
                <use href="#p1" transform="rotate(0 100 100)"></use>
                <use href="#p1" transform="rotate(20 100 100)"></use>
                <use href="#p1" transform="rotate(40 100 100)"></use>
                <use href="#p1" transform="rotate(60 100 100)"></use>
                <use href="#p1" transform="rotate(80 100 100)"></use>
                <use href="#p1" transform="rotate(100 100 100)"></use>
                <use href="#p1" transform="rotate(120 100 100)"></use>
                <use href="#p1" transform="rotate(140 100 100)"></use>
                <use href="#p1" transform="rotate(160 100 100)"></use>
        </svg>
</div>

<script>
mState = () => {
        tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.paused ? (player.pauseAnimations(), vid.pause()) : (player.unpauseAnimations(), vid.play());
        tt.textContent = aud.paused ? '点击播放' : '点击暂停';
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影 发表于 2024-10-11 22:14

那只手的意思是：胆小勿入{:4_173:}

红影 发表于 2024-10-11 22:15

把小播放大了一点，还做了40度的色相变化，嗯，晚上发这个是有点吓人{:4_196:}

红影 发表于 2024-10-11 22:16

谢谢黑黑的代码@马黑黑 {:4_187:}

红影 发表于 2024-10-11 22:18

不怕不怕，掌心雷能破除一切妖魔鬼怪{:4_172:}

马黑黑 发表于 2024-10-11 23:09

炫酷

起个网名好难 发表于 2024-10-12 07:42

现代版的阴曹地府入口{:5_117:}

茉莉 发表于 2024-10-12 08:11

有点魔幻呀，加上这样的音乐{:4_173:}

茉莉 发表于 2024-10-12 08:12

红影 发表于 2024-10-11 22:18
不怕不怕，掌心雷能破除一切妖魔鬼怪

原来如此，那就胆子大大的呆一会 {:4_173:}

梦油 发表于 2024-10-12 09:13

我的胆子倒是不小，就是有点晕。哈哈哈……{:4_189:}

梦江南 发表于 2024-10-12 11:17

有点阴啊！

小辣椒 发表于 2024-10-12 13:34

亲爱的，这个效果配的音乐也是太幽灵兮兮了{:4_173:}

小辣椒 发表于 2024-10-12 13:35

播放器加大了尺寸配这个背景 效果挺好{:4_199:}

小辣椒 发表于 2024-10-12 13:35

亲爱的会动脑子，每个帖效果都是棒棒的{:4_178:}

红影 发表于 2024-10-12 13:41

马黑黑 发表于 2024-10-11 23:09
炫酷

是黑黑的代码酷{:4_187:}

红影 发表于 2024-10-12 13:41

起个网名好难 发表于 2024-10-12 07:42
现代版的阴曹地府入口

没事，有个大手阻挡着人们随意过去{:4_173:}

红影 发表于 2024-10-12 13:42

茉莉 发表于 2024-10-12 08:11
有点魔幻呀，加上这样的音乐

特意去找的这样音乐，想弄个好玩的。谢谢茉莉临帖{:4_187:}

红影 发表于 2024-10-12 13:43

茉莉 发表于 2024-10-12 08:12
原来如此，那就胆子大大的呆一会

对对，放心大胆好了，什么事都没有{:4_189:}

红影 发表于 2024-10-12 13:43

梦油 发表于 2024-10-12 09:13
我的胆子倒是不小，就是有点晕。哈哈哈……

是的，大手和视频都是动的，看着有点晕{:4_173:}

起个网名好难 发表于 2024-10-12 13:43

红影 发表于 2024-10-12 13:41
没事，有个大手阻挡着人们随意过去

怕是那大手要抓人进去的{:5_106:}

查看完整版本: 《误入迷失森林》（学习黑黑 Entropy代码效果）