论坛 › 欢乐水吧 › 偏 向（马黑黑原创）

朵拉 发表于 2024-7-28 11:06

偏 向（马黑黑原创）

<style>
#mydiv {
        margin: 130px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://pic.imgdb.cn/item/66a5af51d9c307b7e9515f51.png') no-repeat center/cover;
        box-shadow: 0 0 6px rgba(0,0,0,.6);
        overflow: hidden;
        z-index: 1;
        display: grid;
        place-items: center;
        position: relative;
}
#mydiv::before {
        position: absolute;
        content: '';
        inset: -100px;
        background: repeating-conic-gradient(at 50px 50px , transparent 0%, rgba(0,255,255,.25) 4%, transparent 8%);
        transform-origin: 50px 50px;
        animation: swear 5s infinite alternate var(--state);
}
#player {
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: 12px double rgba(55,144,177,.7);
        cursor: pointer;
        animation: rot 12s linear infinite var(--state);
}
#player::before, #player::after {
        position: absolute;
        content: '';
        border-radius: inherit;
        border: inherit;
}
#player::before {
        inset: 12px;
        border-style: double solid;
        border-color: rgba(68,205,241,.65);
}
#player::after { inset: 48px; border-style: dotted; }
li-zi {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        box-shadow: inset 0 0 10px lightblue;
        animation: up 4s linear infinite var(--state);
}
@keyframes swear {
        from { transform: rotate(-6deg); }
        to { transform: rotate(6deg); }
}
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes up {
        to { transform: translateY(var(--yy)); opacity: 0; }
}
</style>

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

<script>
Array.from({length: 60}).forEach(i => {
        i = document.createElement('li-zi');
        i.style.cssText += `
                left: ${50 + Math.floor(Math.random() * 100)}px;
                top: 95px;
                background: #${Math.random().toString(16).substring(2,8)};
                animation-delay: -${Math.random() * 4}s;
                --yy: ${500 * }px;
        `;
        player.appendChild(i);
});
aud.oncanplay = aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

朵拉 发表于 2024-7-28 11:06

@马黑黑
老师好，学生交作业，请指正哈{:4_190:}

马黑黑 发表于 2024-7-28 11:09

{:4_199:}

红影 发表于 2024-7-28 11:21

这个漂亮，底图是有logo呢，最好能去掉{:4_173:}
欣赏朵宝好帖{:4_204:}

小辣椒 发表于 2024-7-28 12:24

欣赏朵拉的精彩制作，这个旋转粒子作业出来了{:4_199:}

小辣椒 发表于 2024-7-28 12:26

小辣椒已经拉下许多作业没有完成了，向朵拉学习！

海笑 发表于 2024-7-28 14:03

欣赏老师佳作！

梦江南 发表于 2024-7-28 14:27

欣赏老师精彩音画！{:4_187:}

梦油 发表于 2024-7-28 14:36

欣赏佳作，问候朵拉。

查看完整版本: 偏 向（马黑黑原创）