论坛 › 音乐沙龙 › 月光鸣奏曲

马黑黑 发表于 2023-4-17 11:54

月光鸣奏曲

本帖最后由 马黑黑 于 2023-4-20 13:14 编辑 <br /><br /><style>
#papa {
        margin: -80px 00 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t23/webp1/night.webp') center/cover no-repeat;
        overflow: hidden;
        position: relative;
        --state: paused;
}
#mplayer {
        position: absolute;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        box-shadow: 10px 8px snow;
        cursor: pointer;
        animation: rot 1s infinite linear alternate var(--state);
}
#mplayer::before {
        position: absolute;
        content: '';
        top: 10px;
        left: 10px;
        width: 100%;
        height: 100%;
}
#wrap {
        position: absolute;
        width: 100%;
        height: 50%;
        transform: rotate(-30deg);
}
.line {
        --du: 10s; --delay: 0s;
        position: absolute;
        width: 1px;
        height: 100px;
        top: -200px;
        opacity: .9;
        background: linear-gradient(to top, snow, transparent);
        animation: flow var(--du) var(--delay) infinite linear var(--state);
}
@keyframes flow { to { top: 100%; opacity: 0; } }
@keyframes rot { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
</style>

<div id="papa">
        <div id="wrap"></div>
        <div id="mplayer"></div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=421110137" autoplay loop></audio>
</div>

<script>
(function() {
let total = 40, ww = wrap.offsetWidth;
Array.from({length:total}).forEach((item,key) => {
        let sp = document.createElement('span');
        sp.className = 'line';
        sp.style.cssText += `
                --delay: ${Math.random() * 4 - 4}s;
                --du: ${Math.random() * 8 + 4}s;
                left: ${Math.random() * ww}px;
                height: ${Math.random() * 50 + 50}px;
        `;
        wrap.appendChild(sp);
});
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2023-4-17 11:55

帖子代码
<style>
#papa {
        margin: -80px 00 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t23/webp1/night.webp') center/cover no-repeat;
        overflow: hidden;
        position: relative;
        --state: paused;
}
#mplayer {
        position: absolute;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        box-shadow: 10px 8px snow;
        cursor: pointer;
        animation: rot 1s infinite linear alternate var(--state);
}
#mplayer::before {
        position: absolute;
        content: '';
        top: 10px;
        left: 10px;
        width: 100%;
        height: 100%;
}
#wrap {
        position: absolute;
        width: 100%;
        height: 50%;
        transform: rotate(-30deg);
}
.line {
        --du: 10s; --delay: 0s;
        position: absolute;
        width: 1px;
        height: 100px;
        top: -200px;
        opacity: .9;
        background: linear-gradient(to top, snow, transparent);
        animation: flow var(--du) var(--delay) infinite linear;
}
@keyframes flow { to { top: 100%; opacity: 0; } }
@keyframes rot { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
</style>

<div id="papa">
        <div id="wrap"></div>
        <div id="mplayer"></div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=421110137" autoplay loop></audio>
</div>

<script>
let total = 40, ww = wrap.offsetWidth;
Array.from({length:total}).forEach((item,key) => {
        let sp = document.createElement('span');
        sp.className = 'line';
        sp.style.cssText += `
                --delay: ${Math.random() * 4 - 4}s;
                --du: ${Math.random() * 8 + 4}s;
                left: ${Math.random() * ww}px;
                height: ${Math.random() * 50 + 50}px;
        `;
        wrap.appendChild(sp);
});
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2023-4-17 11:57

本帖最后由 马黑黑 于 2023-4-17 11:58 编辑

css-doodle版本：Moonlight Sonata (freeee.ml)


两个版本实现机制不尽相同：本帖，使用 40 个 span 模拟流星，css-doodle版则用三个背景层模拟流星。

红影 发表于 2023-4-17 12:54

马黑黑 发表于 2023-4-17 11:57
css-doodle版本：Moonlight Sonata (freeee.ml)




这两个帖子，流星雨下来的方向不一样{:4_173:}

红影 发表于 2023-4-17 12:54

用代码模拟的流星雨和月亮，这个制作真棒{:4_199:}

樵歌 发表于 2023-4-17 13:10

这个太漂亮了。以后准备抄了{:4_358:}

樵歌 发表于 2023-4-17 13:12

不知道写字的话加在第几行中{:4_203:}{:4_176:}

大猫咪 发表于 2023-4-17 13:40

PP真漂亮！黑黑真棒！徐缓的旋律中流露出一种淡淡的伤感。。。

现在听真舒服{:4_191:}{:4_179:}

焱鑫磊 发表于 2023-4-17 15:33

欣赏黑黑老师佳作！{:4_187:}

梦油 发表于 2023-4-17 17:02

马黑黑 发表于 2023-4-17 11:55
帖子代码

这流星雨制作得很壮观啊！

马黑黑 发表于 2023-4-17 17:58

梦油 发表于 2023-4-17 17:02
这流星雨制作得很壮观啊！

感谢支持

马黑黑 发表于 2023-4-17 17:59

焱鑫磊 发表于 2023-4-17 15:33
欣赏黑黑老师佳作！

晚上好

醉美水芙蓉 发表于 2023-4-17 18:01

马黑黑 发表于 2023-4-17 18:02

醉美水芙蓉 发表于 2023-4-17 18:01
流星雨真漂亮！欣赏黑黑老师好作品！

好久不见。一切安好？

梦油 发表于 2023-4-17 18:04

马黑黑 发表于 2023-4-17 17:58
感谢支持

怎一个赞字了得。{:4_199:}

马黑黑 发表于 2023-4-17 18:04

梦油 发表于 2023-4-17 18:04
怎一个赞字了得。

{:5_108:}

醉美水芙蓉 发表于 2023-4-17 18:04

马黑黑 发表于 2023-4-17 18:06

醉美水芙蓉 发表于 2023-4-17 18:04
最近腰间盘突出，只能欣赏老师的作品了，不敢玩了！

久坐久站都会得这个病，多运动运动，走走路是挺好的

雨中悄然 发表于 2023-4-17 18:36

左流星，右流星。黑黑天上飞星星

醉美水芙蓉 发表于 2023-4-17 18:49

查看完整版本: 月光鸣奏曲