网站首页 › ┫单幅音画┣ › 【小雨音画】春暖花开 致：梦儿

小雨的心 发表于 2024-5-4 13:08:49

【小雨音画】春暖花开 致：梦儿

<style>
#papa { margin: 20px 0 20px calc(50% - 880px); width: 1600px; height: 900px; top:130px;background: url('https://806447640.oss-cn-beijing.aliyuncs.com/21/61/533.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
.mypic { position: absolute; cursor: pointer; animation: rot var(--du) infinite linear var(--state); }
.mypic:nth-of-type(1) { left: 390px; top: 300px; width: 50px; mix-blend-mode: hard-light;filter: opacity(.8); --du: 6s; }
.mypic:nth-of-type(2) { right: 300px; top: 200px; filter: opacity(.8) blur(.5px); --du: 10s; }
.mypic:nth-of-type(3) { width: 120px; right: 300px; top: 200px; filter: opacity(.9) brightness(1.2); --du: 4s; }
@keyframes rot { to { transform: rotate(360deg); } }
#vid {
    position: absolute;
    width: 100%;
    height: 110%;
    opacity: .65;
    top:-80px;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
}
</style>

<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1caa11c20fb.mp4" autoplay loop muted></video>
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1431107987" autoplay loop></audio>
    <img class="mypic" src="https://638183.freep.cn/638183/small/hxxb.png" alt="" />
    <img class="mypic" src="https://638183.freep.cn/638183/small/hxxb.png" alt="" />
    <img class="mypic" src="https://638183.freep.cn/638183/small/hxxb.png" alt="" />
</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: '.mypic',
      lrc_css: 'left: 50%; transform: translate(-50%);--bg: linear-gradient(rgba(250,250,250,.25),rgba(95,158,160.65)); position: absolute;opacity: .85; bottom: 20px; font: bold 1.8em sans-serif; color: #F0F8FF;',
    });
};
let geci = [
    [-0.02,"单曲：春暖花开",3.0],
    ,
    ,
    ,
    ,
    ,
    ,
    ,
    ,
    ,
    ,
    ,
    ,
    ,
    ,
    ,
    ,
    ,
    ,
    ,
    ,
    ,
    ,
    ,
    ,
    ,
    ,
    ,
    ,
    ,
    ,
   
];
var btns = document.querySelectorAll('.mypic');
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
btns.forEach(btn => btn.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>
<br><br><br><br><br><br><br><br>

浅唱 发表于 2024-5-8 12:27:57

祝小雨和梦儿开心每一天

浅唱 发表于 2024-5-8 12:29:22

现在制作音画的人越来越少
为小雨的坚持点赞

绿蔷薇 发表于 2024-5-8 19:09:46

小雨好久不见，么么哒~~{:4_123:}

绿蔷薇 发表于 2024-5-8 19:10:34

渐变的色彩好美
这就是春天的模样

绿蔷薇 发表于 2024-5-8 19:11:15

问好小雨，初夏安好~~{:S06:}

紫雨琦琦 发表于 2024-5-9 21:33:04

春天是一个美人儿:victory:

小雨的心 发表于 2024-5-11 19:05:58

浅唱 发表于 2024-5-8 12:27
祝小雨和梦儿开心每一天

谢谢浅唱{:1_155:}

小雨的心 发表于 2024-5-11 19:06:42

浅唱 发表于 2024-5-8 12:29
现在制作音画的人越来越少
为小雨的坚持点赞

是的，做音画的人少了，我也做的不多，好久不做就会忘

小雨的心 发表于 2024-5-11 19:07:11

绿蔷薇 发表于 2024-5-8 19:09
小雨好久不见，么么哒~~

问好薇薇，么么哒~~

查看完整版本: 【小雨音画】春暖花开 致：梦儿