小雨的心 发表于 2024-10-1 15:26:11

【小雨音画】今天是你的生日，我的中国

<style>
#papa { margin: 20px 0 20px calc(50% - 871px); width: 1600px; height: 900px;top:130px;background: radial-gradient(circle,transparent,rgba(    0,0,0,var(--opa))),url('http://www.yhyhlt.com/data/attachment/forum/202410/01/150424pykjwk0jl0k5kway.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; --opa: .4; }
#mplayer { position: absolute; right: 216px; top: 376px; width: 86px; height: 233px; box-sizing: border-box; cursor: pointer; }
#mplayer::before, #mplayer::after { position: absolute; content: ''; width: 100%; height: 136px; background: url('') no-repeat; }
#mplayer::after { height: 97px; top: 136px; background-position: 0 -136px; transform-origin: 50% 0; animation: swear .5s linear infinite alternate var(--state); }
#mplayer:hover { filter: drop-shadow(0 0 60px snow) brightness(1.2); }
@keyframes swear { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
#vid {
    position: absolute;
    width: 100%;
    height: 110%;
    top:-80px;
    opacity: .15;
    object-fit: cover;
    pointer-events: none;
}
</style>

<div id="papa"><video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/64/5e594fa25b1d4.mp4" autoplay loop muted></video>
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2015054829" autoplay loop></audio>
    <div id="mplayer" title="播放/暂停"></div>
</div>

<script>
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);

sFile.onload = () => {
    LRC({
      papa: '#papa',
      lrcAr: geci,
      btn: '#mplayer',
      lrc_css: 'left: 50%; transform: translate(-50%);--bg: linear-gradient(rgba(250,250,250,.25),rgba(255,165,0.65)); position: absolute; bottom: 20px; font: bold 1.8em sans-serif; color: #F0F8FF;',
    });
};
let geci = [
    [-1.6,"单曲：今天是你的生日",1.6],
    ,

];
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
setInterval (function() { if(!aud.paused) papa.style.setProperty('--opa', Math.random()); },600);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<br><br><br><br><br><br><br><br>

紫雨琦琦 发表于 2024-10-1 15:45:06

祖国，我爱你，生日快乐！

紫雨琦琦 发表于 2024-10-1 15:45:40

音画做的好漂亮{:1_154:}{:1_154:}

圊圊淥詶 发表于 2024-10-1 18:17:22

盛世华诞，举国同庆，
这一片中国红，耀眼振奋！

圊圊淥詶 发表于 2024-10-1 18:17:50

问好小雨，同贺华诞~~{:1_153:}{:1_156:}

绿蔷薇 发表于 2024-10-1 22:55:25

喜庆的画面，特效增加了浓浓的节日氛围，非常漂亮~~~{:S01:}

绿蔷薇 发表于 2024-10-1 22:56:17

问好小雨，我们一起共贺祖国华诞~~~{:S01:}

飒野 发表于 2024-10-2 19:42:12

安静来听

欧阳风刀 发表于 2024-10-4 10:40:59

小雨节日愉快！{:1_155:}

欧阳风刀 发表于 2024-10-4 10:41:53

喜庆漂亮，很是正能量！祝贺祖国75周年！
页: [1]
查看完整版本: 【小雨音画】今天是你的生日，我的中国