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

花潮论坛的教师们节日快乐！

<style>
#papa {
        margin: 150px 0 30px calc(50% - 580px);
        display: grid;
        place-items: center;
        width: 1000px;
        height: 1500px;
        background: url('https://v.djqq.net/tttdj/upfile/20240910172617.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:83%;
        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:21

为花潮的老师们问个好，祝教师节快乐！

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

特别感谢黑黑教授为花潮的辛勤付出{:4_204:}{:4_204:}
@马黑黑

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

也是祝福所有的老师们节日快乐！{:4_204:}{:4_204:}

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

最简单的做个贺贺帖纯是问候

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

有点感冒，发烧还没有全部退，先下了

醉美水芙蓉 发表于 2024-9-10 20:44

醉美水芙蓉 发表于 2024-9-10 20:45

醉美水芙蓉 发表于 2024-9-10 20:46

马黑黑 发表于 2024-9-10 20:57

小辣椒 发表于 2024-9-10 20:22
特别感谢黑黑教授为花潮的辛勤付出
@马黑黑

今天还真有人请马老师吃饭{:4_173:}

樵歌 发表于 2024-9-10 21:23

必须表扬下小辣椒带病坚持庆祝老师节！

樵歌 发表于 2024-9-10 21:23

向花潮的老师们致敬！{:4_204:}

红影 发表于 2024-9-10 22:11

这个真好，不忘师恩，是天下学子的共同心愿。
借亲爱的好帖，同祝所有的老师们节日快乐{:4_187:}{:4_177:}

梦江南 发表于 2024-9-11 08:13

问好，小辣椒老师辛苦了！{:4_187:}

四海八荒 发表于 2024-9-11 08:27

年轻时候，做过武术老师{:4_189:}带一群徒弟去田野里撒欢。
比较正规的一次，是在四川做了十天的临时老师，给小学生讲故事。

梦油 发表于 2024-9-11 08:49

祝花潮的教育工作者致以崇高的敬意！

小九 发表于 2024-9-12 20:06

小辣椒 发表于 2024-9-10 20:34
有点感冒，发烧还没有全部退，先下了

辣椒多保重身体{:4_183:}
页: [1]
查看完整版本: 花潮论坛的教师们节日快乐！