论坛 › 欢乐水吧 › 心之火（马黑黑原创）

朵拉 发表于 2024-7-28 12:51

心之火（马黑黑原创）

本帖最后由 朵拉 于 2024-7-28 21:40 编辑 <br /><br /><style>
#papa {
        margin: 30px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 600px;
        background: url('https://pic.imgdb.cn/item/66a5ca65d9c307b7e9665964.jpg') no-repeat center/cover;
        overflow: hidden;
        box-shadow: 0 0 10px rgba(0,0,0,.5);
        z-index: 1;
        position: relative;
}
#player {
        position: absolute;
        bottom: -30px;
        left: calc(50% - 1px);
        width: 300px;
        height: 300px;
        border: 6px solid orange;
        border-radius: 50%;
        cursor: pointer;
        transform: rotateX(60deg);
        --tt: 6s;
}
#player::before, #player::after {
        position: absolute;
        content: '';
        border: inherit;
        border-radius: inherit;
        animation: rot var(--tt) linear infinite var(--state);
}
#player::before {
        inset: 20px;
        border-color: transparent red;
}
#player::after {
        inset: 40px;
        border-width: 12px;
        border-style: dashed;
        --tt: 4s;
}
li-zi {
        position: absolute;
        width: 10px;
        height: 20px;
        border-radius: 50%;
        box-shadow: inset 0 0 10px red;
}
@keyframes moving {
        from { transform: translateY(0); opacity: 1; }
        to { transform: translateY(-800px); opacity: 0; }
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <!-- Moola Mantra -->
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2606706631" autoplay loop></audio>
        <div id="player" title="播放/暂停" class="loading"></div>
</div>

<script>
var all = 100;
for(var i = 0; i < all; i++) {
        var lz = document.createElement('li-zi');
        lz.style.cssText += `
                left: ${ 60 + Math.floor(Math.random() * 160)}px;
                top: ${ 60 + Math.floor(Math.random() * 160)}px;
                background: #${Math.random().toString(16).substring(2,8)};
                animation: moving ${Math.random() * 2 + 2}s -${Math.random() * 4}s cubic-bezier(0.01, 0.12, 0.6, 1.04) infinite var(--state);
        `;
        player.prepend(lz);
}
aud.oncanplay = aud.onplaying = aud.onpause = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

朵拉 发表于 2024-7-28 12:56

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

马黑黑 发表于 2024-7-28 12:58

{:4_199:}

愤怒的葡萄 发表于 2024-7-28 13:36

《花千骨》的片头曲，挺好听的。

小辣椒 发表于 2024-7-28 13:47

朵拉速度啊，有一个作业完成{:4_199:}

小辣椒 发表于 2024-7-28 13:47

欣赏朵拉精彩的制作{:4_178:}

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

欣赏老师佳作！

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

欣赏老师的精美制作！{:4_187:}

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

欣赏佳作，问候朵拉。

红影 发表于 2024-7-28 16:51

漂亮，欣赏朵宝好帖{:4_204:}

樵歌 发表于 2024-7-28 19:01

越做越精致了！

冬天的雨 发表于 2024-7-28 19:55

小朵拉晚上好{:4_187:}

冬天的雨 发表于 2024-7-28 19:56

欣赏小朵拉美美的制作{:4_178:}

查看完整版本: 心之火（马黑黑原创）