论坛 › 马黑黑教程专版 › 这个用来干啥好

马黑黑 发表于 2023-12-23 14:07

这个用来干啥好

<style>
#mydiv {
        margin: 100px auto;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        box-shadow: 4px 8px 28px gray, inset 0 0 160px lightblue;
        background: lightgreen;
        display: grid;
        place-items: center;
        position: relative;
}
li-zi {
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: navy;
        opacity: .95;
        animation: moving var(--duration) var(--delay) linear infinite alternate;
}
@keyframes moving {
        from { transform: translate(0,0); }
        to { transform: translate(var(--xx),var(--yy)); }
}
</style>

<div id="mydiv"></div>

<script>
let r = mydiv.offsetWidth / 2 - 10, total = 30;
Array.from({length: total}).forEach((item,key) => {
        let rad = (Math.PI / 180) * 360 / total;
        item = document.createElement('li-zi');
        item.style.cssText += `
                --xx: ${r * Math.cos(rad * key)}px;
                --yy: ${r * Math.sin(rad * key)}px;
                --duration: ${2 + Math.random() * 3}s;
                --delay: -${Math.random() * 5}s;
                background: #${Math.random().toString(16).substr(-6)};
        `;
        mydiv.appendChild(item);
});
</script>

马黑黑 发表于 2023-12-23 14:08

代码
<style>
#mydiv {
        margin: 100px auto;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        box-shadow: 4px 8px 28px gray, inset 0 0 160px lightblue;
        background: lightgreen;
        display: grid;
        place-items: center;
        position: relative;
}
li-zi {
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: navy;
        opacity: .95;
        animation: moving var(--duration) var(--delay) linear infinite alternate;
}
@keyframes moving {
        from { transform: translate(0,0); }
        to { transform: translate(var(--xx),var(--yy)); }
}
</style>

<div id="mydiv"></div>

<script>
let r = mydiv.offsetWidth / 2 - 10, total = 30;
Array.from({length: total}).forEach((item,key) => {
        let rad = (Math.PI / 180) * 360 / total;
        item = document.createElement('li-zi');
        item.style.cssText += `
                --xx: ${r * Math.cos(rad * key)}px;
                --yy: ${r * Math.sin(rad * key)}px;
                --duration: ${2 + Math.random() * 3}s;
                --delay: -${Math.random() * 5}s;
                background: #${Math.random().toString(16).substr(-6)};
        `;
        mydiv.appendChild(item);
});
</script>

马黑黑 发表于 2023-12-23 14:09

母球放大就没那么好看，看看谁帮忙设计一下CSS的box-shadow，让母球较大时也那么好看

红影 发表于 2023-12-23 14:34

好玩，粒子碰撞{:4_199:}

红影 发表于 2023-12-23 14:36

马黑黑 发表于 2023-12-23 14:09
母球放大就没那么好看，看看谁帮忙设计一下CSS的box-shadow，让母球较大时也那么好看

现在的就挺好看啊，像有立体感似的{:4_204:}

梦油 发表于 2023-12-23 14:59

好漂亮哎！我看这个是不是可以开发游戏软件啊？

红影 发表于 2023-12-23 15:06

等翻页了我试个放大的，现在无法试，怕冲突主帖{:4_173:}

马黑黑 发表于 2023-12-23 16:23

红影 发表于 2023-12-23 14:34
好玩，粒子碰撞

{:4_189:}

马黑黑 发表于 2023-12-23 16:24

梦油 发表于 2023-12-23 14:59
好漂亮哎！我看这个是不是可以开发游戏软件啊？

木有，和游戏没有关系

小文 发表于 2023-12-23 16:32

这个太好玩了

世外桃源 发表于 2023-12-23 16:34

这个是做播放器的{:4_187:}

梦油 发表于 2023-12-23 16:43

马黑黑 发表于 2023-12-23 16:24
木有，和游戏没有关系

挺好玩的。

马黑黑 发表于 2023-12-23 17:31

梦油 发表于 2023-12-23 16:43
挺好玩的。

{:4_181:}

马黑黑 发表于 2023-12-23 17:31

世外桃源 发表于 2023-12-23 16:34
这个是做播放器的

也可以

马黑黑 发表于 2023-12-23 17:35

红影 发表于 2023-12-23 14:36
现在的就挺好看啊，像有立体感似的

有一点

红影 发表于 2023-12-23 20:27

马黑黑 发表于 2023-12-23 16:23


当心碰多了爆炸{:4_173:}

红影 发表于 2023-12-23 20:27

马黑黑 发表于 2023-12-23 17:35
有一点

黑黑弄出来都好看{:4_187:}

马黑黑 发表于 2023-12-23 21:10

红影 发表于 2023-12-23 20:27
黑黑弄出来都好看

也许有一点点

马黑黑 发表于 2023-12-23 21:11

红影 发表于 2023-12-23 20:27
当心碰多了爆炸

都有防爆功能了

红影 发表于 2023-12-24 10:17

马黑黑 发表于 2023-12-23 21:11
都有防爆功能了

那个外壁还不够厚{:4_196:}

查看完整版本: 这个用来干啥好