论坛 › 音乐沙龙 › 路南 - 关山月

马黑黑 发表于 2023-12-15 22:51

路南 - 关山月

<style>
#papa {
    margin: 0 0 0 calc(50% - 701px);
    width: 1240px;
    height: 775px;
    background: #666 url('https://638183.freep.cn/638183/t23/webp2/grujyt.webp') no-repeat center/cover;
    overflow: hidden;
    display: grid;
    place-items: center;
    box-shadow: 3px 6px 12px gray;
    position: relative;
    --state: paused;
}
    #player {
    display: grid;
    place-items: center;
    width: 300px;
    height: 300px;
    cursor: pointer;
    background: url('https://638183.freep.cn/638183/t23/btn/meihua.png') no-repeat center/cover;
    animation: rotating 18s linear infinite var(--state);
}
#player::before, #player::after {
    position: absolute;
    content: '';
    width: 120%;
    height: 120%;
    background: inherit;
    transform: rotate(135deg);
    filter: hue-rotate(100deg) opacity(.7);
}
#player::after {
    width: 100%;
    height: 100%;
    transform: rotate(200deg);
}
li-zi {
    position: absolute;
    width: 10px;
    height: 5px;
    border-radius: 100% 50%;
    background: tan;
    animation: imov 6s infinite;
}
@keyframes moving {
    from { opacity: .0; transform: rotate(0) translate(0,0); }
    to { opacity: 1; transform: rotate(var(--deg)) translate(var(--x0),var(--y0)); }
}
@keyframes rotating {
    to { transform: rotate(-360deg); }
}
</style>

<div id="papa">
    <div id="player" title="播放/暂停"></div>
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1451656076" autoplay loop></audio>
</div>

<script>

(function() {

let all = 120;
for(let i = 0; i < all; i++) {
    let movBall = document.createElement('li-zi');
    movBall.style.cssText += `
      --x0: -1440px;
      --y0: 400px;
      --deg: ${Math.random() * 15}deg;
      left: 1240px;
      top: 0px;
      right: 0px;
      top: 0px;
      background: linear-gradient( to right, rgba(200,200,200,.8), rgba(225,225,225,.15));
      animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);
    `;
    papa.prepend(movBall);
}

let playMusic = () => aud.paused ? (aud.play(), player.title='暂停') : (aud.pause(), player.title='播放');
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing',mState,false);
aud.addEventListener('pause',mState,false);
player.addEventListener('click',playMusic,false);

})();

</script>

红影 发表于 2023-12-16 00:25

这些花儿的叠加如梦似幻的，好美啊。粒子的设计也好美。欣赏黑黑好帖{:4_199:}

红影 发表于 2023-12-16 00:37

音乐很好听，夜晚听着这样的音乐，仔细感受着其中的苍茫和气魄，仿佛古老的历史痕迹从眼前缓缓漫过，内中有气吞山河的壮美，鼓乐声尤其如此，还有轻轻的吟唱，让人感受一份思乡的愁情，很好听的曲子。黑黑的背景也很令人联想。沧海桑田，岁月变迁，物是人非，往事如梦。{:4_187:}

红影 发表于 2023-12-16 00:45

记得清舟特别喜欢带鼓声的音乐，现在听听觉得真不错呢{:4_204:}

醉美水芙蓉 发表于 2023-12-16 06:36

马黑黑 发表于 2023-12-16 07:39

醉美水芙蓉 发表于 2023-12-16 06:36
欣赏学习黑黑老师美贴！

{:4_190:}

马黑黑 发表于 2023-12-16 07:41

红影 发表于 2023-12-16 00:25
这些花儿的叠加如梦似幻的，好美啊。粒子的设计也好美。欣赏黑黑好帖

随意用几个CSS滤镜，也没什么考究

马黑黑 发表于 2023-12-16 07:43

红影 发表于 2023-12-16 00:45
记得清舟特别喜欢带鼓声的音乐，现在听听觉得真不错呢

记得那时大家都推崇新世纪的音乐，里面的音乐多数都是有鼓点带节奏的

马黑黑 发表于 2023-12-16 07:45

红影 发表于 2023-12-16 00:37
音乐很好听，夜晚听着这样的音乐，仔细感受着其中的苍茫和气魄，仿佛古老的历史痕迹从眼前缓缓漫过，内中有 ...

这是路南用心之作，音乐中充满着对历史的追思与思考，中国元素厚重。

亚伦影音工作室 发表于 2023-12-16 08:11

这效果杠杠的，有时间再研究吧！

梦油 发表于 2023-12-16 09:31

黑黑先生早晨好！
你制作的《关山月》图曲相辅相成，更让人感受到乐曲的沉郁、苍茫、悲凉和激越。谢谢你精美的制作，分享了。

红影 发表于 2023-12-16 11:10

马黑黑 发表于 2023-12-16 07:41
随意用几个CSS滤镜，也没什么考究

在这样的背景衬托下特别好看呢{:4_187:}

红影 发表于 2023-12-16 11:10

马黑黑 发表于 2023-12-16 07:43
记得那时大家都推崇新世纪的音乐，里面的音乐多数都是有鼓点带节奏的

嗯嗯，这个音乐真不错，很入心。

红影 发表于 2023-12-16 11:12

马黑黑 发表于 2023-12-16 07:45
这是路南用心之作，音乐中充满着对历史的追思与思考，中国元素厚重。

音乐可以洗涤心灵，这样的音乐更是能牵动人的思绪{:4_204:}

马黑黑 发表于 2023-12-16 11:13

红影 发表于 2023-12-16 11:12
音乐可以洗涤心灵，这样的音乐更是能牵动人的思绪

{:4_181:}

马黑黑 发表于 2023-12-16 11:13

红影 发表于 2023-12-16 11:10
嗯嗯，这个音乐真不错，很入心。

是的

马黑黑 发表于 2023-12-16 11:14

红影 发表于 2023-12-16 11:10
在这样的背景衬托下特别好看呢

俺也觉得挺好

马黑黑 发表于 2023-12-16 11:20

梦油 发表于 2023-12-16 09:31
黑黑先生早晨好！
你制作的《关山月》图曲相辅相成，更让人感受到乐曲的沉郁、苍茫、悲凉和激越。谢谢你精 ...

感谢支持！上午好{:4_190:}

红影 发表于 2023-12-16 11:23

马黑黑 发表于 2023-12-16 11:13


再来听听关山月，感谢黑黑带来的好帖{:4_171:}

红影 发表于 2023-12-16 11:24

马黑黑 发表于 2023-12-16 11:13
是的

黑黑喝完酒了，听着这样的音乐是不是更是思绪万千啊{:4_173:}

查看完整版本: 路南 - 关山月