小辣椒 发表于 2024-9-10 20:42

祝老师们节日快乐！


<style>
#papa {
        margin: 130px 0 30px calc(50% - 490px);
        display: grid;
        place-items: center;
        width: 1000px;
        height: 1500px;
        background: url('https://v.djqq.net/tttdj/upfile/20240910203828.jpg') no-repeat center/cover;
        box-shadow: 0 0 8px #333;
        overflow: hidden;
        position: relative;
}
li-zi {
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: snow;
        box-shadow: 100px 0 0 plum, 0 50px 0 lightyellow;
}
#player {
        position: absolute;
        width: 60px;
        height: 60px;
                top:85%;
        filter: drop-shadow(0 0 1px darkgreen);
        cursor: pointer;
        animation: rot 8s linear infinite var(--state);
}
.leaf {
        position: absolute;
        left: -50%;
        top: -50%;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, yellow, red);
        border-radius: 100% 50%;
        opacity: .95;
        transform-origin: 100% 100%;
        transform: rotate(var(--deg)) translateY(60px);
}

@keyframes moving {
        from { opacity: 0; transform: ratate(0) translate(0,0) scale(0.2); }
        to { opacity: 1; transform: rotate(60deg) translate(var(--x0),var(--y0)) scale(1.5); }
}
@keyframes rot { to { transform: rotate(360deg); } };
</style>

<div id="papa">
        <div id="player"></div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=289196.mp3" autoplay loop></audio>
</div>

<script>
mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');

Array(total=5).fill('').forEach((i,k) => {
        i = document.createElement('span');
        i.className = 'leaf';
        i.style.cssText += `--deg: ${360/total * k}deg;`;
        player.appendChild(i);
});

for(var i = 0, all = 80; i < all; i++) {
        let lz = document.createElement('li-zi');
        let hudu = Math.PI / 180 * 360 / all * i;
        let xx = 800 * Math.cos(hudu), yy = 600 * Math.sin(hudu), size = Math.ceil(Math.random() * 3 + 3);
        lz.style.cssText += `
                --x0: ${xx}px;
                --y0: ${yy}px;
                width: ${size}px;
                height: ${size}px;
                animation: moving ${Math.random() * 5 + 5}s -${Math.random() * 10}s linear infinite var(--state);
        `;
        papa.prepend(lz);
}

aud.onplaying = aud.onpause = () => mState();

player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

小辣椒 发表于 2024-9-10 20:43

祝教师节快乐!

小辣椒 发表于 2024-9-10 20:45

艾特liumang

教师节快乐！

liumang 发表于 2024-9-10 20:46

小辣椒来了{:5_158:}{:5_158:}

小辣椒 发表于 2024-9-10 20:47

liumang 发表于 2024-9-10 20:46
小辣椒来了

节日快乐！{:5_122:}{:5_122:}

liumang 发表于 2024-9-10 20:47

小辣椒 发表于 2024-9-10 20:47
节日快乐！

在发烧还做帖，赶快去休息

liumang 发表于 2024-9-10 20:48

{:5_116:}{:5_116:}{:5_116:}

好好休息

小辣椒 发表于 2024-9-10 20:48

liumang 发表于 2024-9-10 20:48
好好休息

简单一帖，心意一下的，我下了

liumang 发表于 2024-9-10 20:49

小辣椒 发表于 2024-9-10 20:48
简单一帖，心意一下的，我下了

知道你做帖速度快的，但身体不好还是去休息{:5_140:}{:5_140:}
页: [1]
查看完整版本: 祝老师们节日快乐！