朵拉 发表于 2024-9-4 23:33

晚风告白（马黑黑原创）

<style>
#papa {
        margin: 30px 0 30px calc(50% - 593px);
        display: grid;
        place-items: center;
        width: 1024px;
        height: 570px;
        background: url('https://pic.imgdb.cn/item/66d74e0bd9c307b7e9fd435c.jpg') no-repeat center/cover;
        box-shadow: 0 0 8px #333;
        overflow: hidden;
        position: relative;
}
li-zi {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: snow;
        box-shadow: 100px 0 0 plum, 0 50px 0 orange;
}
#player {
        position: absolute;
        width: 60px;
        height: 60px;
        filter: drop-shadow(0 0 1px purple);
        cursor: pointer;
        animation: rot 8s linear infinite var(--state);
}
.leaf {
        position: absolute;
        left: -150%;
        top: -150%;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, #676aa9, #f3bb82);
        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://www.kumeiwp.com/wj/143672/2023/04/03/f698b8aa3d6a801ae502ac856e2746fb.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() * 5 + 5);
        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-4 23:35

@马黑黑
老师 晚上好，修改了参数 转圈圈也不错，
请老师指正哈~~{:4_190:}

梦江南 发表于 2024-9-5 08:15

欣赏老师美帖。

茉莉 发表于 2024-9-5 16:09

漂亮呢，问好朵拉

茉莉 发表于 2024-9-5 16:09

这歌我喜欢，也去试试

马黑黑 发表于 2024-9-5 20:44

{:4_174:}

小辣椒 发表于 2024-9-5 21:02

欣赏朵拉的精彩制作，每天的作业都做的不错{:4_199:}
页: [1]
查看完整版本: 晚风告白（马黑黑原创）