小雨的心 发表于 2024-10-6 16:37:35

【云荷八周年】谢谢你的出现

<style>
#qsfg28 {
    margin: 130px 0 20px calc(50% - 871px) ;
    width: 1600px;
    height: 900px;
    background: url('http://www.yhyhlt.com/data/attachment/forum/202410/06/125145sfbjwajwjf8jpbyz.jpg') no-repeat center/cover;
    overflow: hidden;
    position: relative;
}
#player {
    position: absolute;
    left: 300px;
    bottom: 300px;
    width: 120px;
    height: 120px;
    cursor: pointer;
    border-radius: 50%;
    opacity: .5;
    mix-blend-mode: multiply;
    animation: rot 8s linear infinite var(--state);
    z-index: 11;
}
li-zi {
    position: absolute;
    width: 10px;
    height: 10px;
    left: 300px;
    bottom: 300px;
    border-radius: 50%;
    box-shadow: inset 0 0 10px lightblue;
    background: DeepSkyBlue;
}
#vid {
    position: absolute;
    width: 120%;
    height: 100%;
    bottom:0px;
    left:-260px;
    filter: hue-rotate(10deg);
    opacity: .79;
    object-fit: cover;
    mix-blend-mode: screen;
    transform: rotateY(180deg);
      -webkit-mask: linear-gradient(0deg, red 26%, transparent 55%, transparent);
}
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes moving {
    from { opacity: 1; transform: translate(0,0); }
    to { opacity: 0.1; transform: translate(var(--x0),var(--y0)); }
}
</style>
<div id="qsfg28">
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/52/5b44f4d7298d6.mp4" autoplay loop muted></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2011844398.mp3" autoplay loop></audio>
<img id="player" alt="" src="https://pic.imgdb.cn/item/66cef103d9c307b7e9899792.gif" title="播放/暂停" />
</div>

<script>
for(let i = 0, all = 80; i < all; i++) {
    let lz = document.createElement('li-zi');
    let hudu = Math.PI / 180 * 360 / all * i;
    let xx = 900 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
    lz.style.cssText += `
      --x0: ${xx}px;
      --y0: ${yy}px;
      left: 360px;
       bottom: 360px;
            
      animation: moving ${Math.random() * 6 + 6}s -${Math.random() * 6}s infinite var(--state);
    `;
    qsfg28.prepend(lz);
}

var mState = () => {
    qsfg28.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    player.title = aud.paused ? '播放' : '暂停';
    aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
qsfg28.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

飒野 发表于 2024-10-6 19:41:12

我出现了:lol

欧阳风刀 发表于 2024-10-6 21:32:03

清新漂亮，图意美好，小雨制作精彩！{:1_155:}

欧阳风刀 发表于 2024-10-6 21:32:45

共贺云荷八周年！

圊圊淥詶 发表于 2024-10-6 23:26:10

我也出现了~~;P

小雨的心 发表于 2024-10-7 17:45:56

飒野 发表于 2024-10-6 19:41
我出现了

问好飒野，谢谢你的出现

小雨的心 发表于 2024-10-7 17:46:29

欧阳风刀 发表于 2024-10-6 21:32
清新漂亮，图意美好，小雨制作精彩！

问好风帅，谢谢点评

小雨的心 发表于 2024-10-7 17:47:02

圊圊淥詶 发表于 2024-10-6 23:26
我也出现了~~

出现的好，问好洲帅

浅唱 发表于 2024-10-8 11:40:27

问好小雨
假期结束转眼又是新周
借美贴共祝福

小雨的心 发表于 2024-10-9 13:48:45

浅唱 发表于 2024-10-8 11:40
问好小雨
假期结束转眼又是新周
借美贴共祝福

问好浅唱，祝每天都开心
页: [1] 2
查看完整版本: 【云荷八周年】谢谢你的出现