醉美水芙蓉 发表于 2024-2-6 21:37

云水谣TO红影

<style>
#papa { margin: 0 0 0 calc(50% - 693px); width: 1300px; height: 740px; background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/f16e9756146be6be6d31e498b4f24b5a.mp4.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; display: grid; place-items: center; }
#papa::before { position: absolute; content: ''; inset: 0 0 0 0; background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/4b587c474c950f6dc17feb00cd664a4d_preview.jpg') no-repeat center/cover; opacity: .9; transition: opacity .75s; -webkit-mask: url('https://638183.freep.cn/638183/web/svg/heart.svg') no-repeat center; -webkit-mask-size: 0%; animation: chgMask 10s cubic-bezier(.17,.67,.87,.27) infinite alternate var(--state); }
#papa:hover::before { opacity: unset; }
#mypic { position: absolute; top: 20px; width: 100px; cursor: pointer; transition: 1s; animation: rot 6s infinite linear var(--state); }
#mypic:hover { filter: hue-rotate(240deg); }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes chgMask { 20% { -webkit-mask-size: 0; } 100% { -webkit-mask-size: 400%; } }
</style>

<div id="papa">
      <img id="mypic" src="https://638183.freep.cn/638183/web/svg/sunfl-2.svg" alt="" />
      <audio id="aud" src="https://www.qqmc.com/mp3/music336961700.mp3" autoplay loop></audio>
</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%); bottom: 10px;--bg: linear-gradient(rgba(250,250,250,.25),rgba(        178,34,34,.65)); color: #fff;',
        });
};
let geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
var setSize = (ww) => Math.sqrt(2 * Math.pow(ww,2));
var size = setSize(mplayer.offsetWidth / 2);

[...new Array(9).keys()].forEach(key => {
    var item = document.createElement('div');
    item.className = 'doll';
    var deg = key % 2 == 0 ? -360 : 360;
    item.style.cssText += `
      width: ${size}px;
      height: ${size}px;
      background-color: transparent;
      --duration: ${Math.random() * 10 + 10}s;
      --delay: ${Math.random() *-2}s;
      --deg: ${deg}deg;
    `;
    mplayer.appendChild(item);
    size = setSize(size / 1.8);
});
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
function mState() {
    aud.paused
      ? (papa.style.setProperty('--state', 'paused'), vid.pause(), mplayer.title = '播放')
      : (papa.style.setProperty('--state','running'), vid.play(), mplayer.title = '暂停');
}

</script>

愤怒的葡萄 发表于 2024-2-6 22:19

音乐听不了啊，是我浏览器的原因吗？

亦是金 发表于 2024-2-6 22:37

我能看见画面变换，也能听见歌曲！欣赏点赞水芙蓉的美帖！{:4_187:}

亦是金 发表于 2024-2-6 22:41

本帖最后由 亦是金 于 2024-2-6 22:43 编辑

愤怒的葡萄 发表于 2024-2-6 22:19
音乐听不了啊，是我浏览器的原因吗？
换个浏览器试试！我用Microsoft Edge，

红影 发表于 2024-2-6 22:52

漂亮的制作，这个播放器按钮在第一张图图里像美人的头饰，很巧{:4_187:}

红影 发表于 2024-2-6 22:53

感谢水芙蓉美女的好礼，很喜欢{:4_187:}

梦油 发表于 2024-2-7 09:25

优美的礼品，我猜红影一定很喜欢。

醉美水芙蓉 发表于 2024-2-7 11:35

愤怒的葡萄 发表于 2024-2-6 22:19
音乐听不了啊，是我浏览器的原因吗？

换浏览器就可以！

醉美水芙蓉 发表于 2024-2-7 11:36

亦是金 发表于 2024-2-6 22:37
我能看见画面变换，也能听见歌曲！欣赏点赞水芙蓉的美帖！

谢谢老师光临！祝新年快乐！

醉美水芙蓉 发表于 2024-2-7 11:37

红影 发表于 2024-2-6 22:53
感谢水芙蓉美女的好礼，很喜欢

一直都是跟着你玩得！谢谢红影美女光临！

醉美水芙蓉 发表于 2024-2-7 11:37

梦油 发表于 2024-2-7 09:25
优美的礼品，我猜红影一定很喜欢。

谢谢梦油老师光临！祝新年快乐！

樵歌 发表于 2024-2-7 11:53

魔幻而又唯美的图面。两个天使很是可爱。{:4_187:}

红影 发表于 2024-2-7 12:40

醉美水芙蓉 发表于 2024-2-7 11:37
一直都是跟着你玩得！谢谢红影美女光临！

不对呀，我们都是在跟着黑黑玩的才是呢{:4_173:}

菲儿 发表于 2024-2-7 13:42

芙蓉这个特效美美哒，素素漂亮迷人{:4_204:}

菲儿 发表于 2024-2-7 13:43

送礼收礼都开心，{:4_187:}

梦油 发表于 2024-2-7 15:34

醉美水芙蓉 发表于 2024-2-7 11:37
谢谢梦油老师光临！祝新年快乐！

芙蓉朋友别客气。

醉美水芙蓉 发表于 2024-2-7 20:47

菲儿 发表于 2024-2-7 13:42
芙蓉这个特效美美哒，素素漂亮迷人

菲儿来了！谢谢光临！

小辣椒 发表于 2024-2-7 21:05

欣赏水芙蓉的精彩制作{:4_171:}

醉美水芙蓉 发表于 2024-2-7 21:07

小辣椒 发表于 2024-2-7 21:05
欣赏水芙蓉的精彩制作

问候小辣椒！祝新春快乐！
页: [1]
查看完整版本: 云水谣TO红影