醉美水芙蓉 发表于 2024-2-16 22:03

世中逢尔(剧情版)

<style>
#papa { margin: 50px 0 20px calc(50% - 781px); width: 1400px; height: 763px; background: lightgreen url('https://pic.imgdb.cn/item/65cf5fad9f345e8d03ba4d80.png') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
#papa > img { position: absolute; transform: translate(1200px, -50px) rotate(-35deg); width: 80px;top:-90px; filter: hue-rotate(120deg); animation: fly 10s linear infinite var(--state); }
#papa > img:nth-of-type(2) { filter: hue-rotate(180deg); animation-delay: -5s; }
#vid { position: absolute; top: -70px; width: 100%; height: calc(100% + 70px); object-fit: cover; mix-blend-mode: screen; transform: scale(-1,1); }
#iplay { position: absolute; bottom: 35px; left: calc(50% - 90px); width: 100px; height: 100px; border-style: dotted double ridge; border-color: orange red; border-width: 10px; border-radius: 50%; outline: 10px double olive; outline-offset: 2px; animation: flash .4s linear infinite alternate var(--state); cursor: pointer; }
#iplay::before { position: absolute; content: ''; inset: -10px; border-radius: 20%; background: url('https://pic.imgdb.cn/item/65bbb26c871b83018a9455c3.png') no-repeat center/cover; z-index: -1; animation: rotating 10s linear infinite var(--state); }
@keyframes flash { to { border-color: red orange; outline-color: green; } }
@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes fly { to { transform: translate(-50px, 280px) rotate(0); } }
</style>
<div id="papa">
        <audio id="aud" src="https://mp3.t57.cn:7087/kwlink_d.php?id=51576769" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2405811/00/01/79/5b4a079dd190a.mp4" loop muted></video>
<img src="https://i02piccdn.sogoucdn.com/5dc726c7d9a42fc3" alt="" />
        <img src="https://i02piccdn.sogoucdn.com/5dc726c7d9a42fc3" alt="" />
        <div id="iplay"></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: '#iplay',
                lrc_css: 'left: 60%; transform: translate(-50%); bottom: 310px;--bg: linear-gradient(rgba(50,205,50,.35),rgba(50,205,50,.45)); color: #fff;',
        });
};
let geci =[
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

var setSize = (ww) => Math.sqrt(2 * Math.pow(ww,2));
var size = setSize(iplay.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;
    `;
    iplay.appendChild(item);
    size = setSize(size / 1.8);
});
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
iplay.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
function mState() {
    aud.paused

}

</script>

<script>
var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
iplay.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影 发表于 2024-2-16 22:48

漂亮，欣赏水芙蓉美女好帖{:4_187:}

醉美水芙蓉 发表于 2024-2-16 23:07

红影 发表于 2024-2-16 22:48
漂亮，欣赏水芙蓉美女好帖

谢谢红影美女鼓励！

庶民 发表于 2024-2-17 09:04

欣赏朋友佳作。

醉美水芙蓉 发表于 2024-2-17 18:03

庶民 发表于 2024-2-17 09:04
欣赏朋友佳作。

谢谢庶民老师光临！

千羽 发表于 2024-2-17 18:07

来欣赏学习芙蓉的精致美帖，点赞送花花了{:4_187:}

三月的阳光 发表于 2024-2-17 18:16

欣赏水芙蓉美女美帖~~{:4_187:}

红影 发表于 2024-2-17 22:54

醉美水芙蓉 发表于 2024-2-16 23:07
谢谢红影美女鼓励！

不客气，问好水芙蓉美女，晚上好{:4_187:}

愤怒的葡萄 发表于 2024-2-18 09:58

帖子制作得挺漂亮的。

醉美水芙蓉 发表于 2024-2-18 20:22

千羽 发表于 2024-2-17 18:07
来欣赏学习芙蓉的精致美帖，点赞送花花了

谢谢千羽美女光临！

醉美水芙蓉 发表于 2024-2-18 20:22

三月的阳光 发表于 2024-2-17 18:16
欣赏水芙蓉美女美帖~~

谢谢三月的阳光光临！

醉美水芙蓉 发表于 2024-2-18 20:23

愤怒的葡萄 发表于 2024-2-18 09:58
帖子制作得挺漂亮的。

谢谢朋友光临！
页: [1]
查看完整版本: 世中逢尔(剧情版)