论坛 › 马黑黑教程专版 › 用pencilcode写了一个3d球

马黑黑 发表于 2023-4-7 21:27

用pencilcode写了一个3d球

<style>
#papa {
        margin: 30px auto;
        width: 760px;
        height: 640px;
        display: grid;
        place-items: center;
        position: relative;
}
.circle {
        position: absolute;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        border: 2px solid var(--bdcolor);
}
@keyframes rotZ {
        0% { transform: perspective(2000px) rotateX(var(--degX1)) rotateY(var(--degY1)) rotateZ(0deg); }
        100%{ transform: perspective(2000px) rotateX(var(--degX2)) rotateY(var(--degY2)) rotateZ(360deg); }
}
</style>

<div id="papa"></div>

<script>
let total = 50;
Array.from({length: total}).forEach( (item,key) => {
        let sp = document.createElement('span');
        sp.className = 'circle';
        let aX = Math.random() * 360, aY = Math.random() * 360;
        sp.style.cssText += `
                --bdcolor: #${Math.random().toString(16).substr(-6)};
                --degX1: ${aX}deg;
                --degX2: ${aX + 360}deg;
                --degY1: ${aY}deg;
                --degY2: ${aY + 360}deg;
                transform: perspective(2000px) rotateY(${aY}deg) rotateX(${aX}deg);
                animation: rotZ 16s infinite linear;
        `;
        papa.appendChild(sp);
});
</script>

马黑黑 发表于 2023-4-7 21:28

代码（请不要在本页测试，以免对一楼的演示产生干扰）：

<style>
#papa {
        margin: 30px auto;
        width: 1024px;
        height: 640px;
        display: grid;
        place-items: center;
        position: relative;
}
.circle {
        position: absolute;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        border: 2px solid var(--bdcolor);
}
@keyframes rotZ {
        0% { transform: perspective(2000px) rotateX(var(--degX1)) rotateY(var(--degY1)) rotateZ(0deg); }
        100%{ transform: perspective(2000px) rotateX(var(--degX2)) rotateY(var(--degY2)) rotateZ(360deg); }
}
</style>

<div id="papa"></div>

<script>
let total = 50;
Array.from({length: total}).forEach( (item,key) => {
        let sp = document.createElement('span');
        sp.className = 'circle';
        let aX = Math.random() * 360, aY = Math.random() * 360;
        sp.style.cssText += `
                --bdcolor: #${Math.random().toString(16).substr(-6)};
                --degX1: ${aX}deg;
                --degX2: ${aX + 360}deg;
                --degY1: ${aY}deg;
                --degY2: ${aY + 360}deg;
                transform: perspective(2000px) rotateY(${aY}deg) rotateX(${aX}deg);
                animation: rotZ 16s infinite linear;
        `;
        papa.appendChild(sp);
});
</script>

红影 发表于 2023-4-7 22:03

--degX2: ${aX + 360}deg; 怎么感觉任何一个角度加上360度还是它自身啊。

红影 发表于 2023-4-7 22:04

这个漂亮，各个角度都在转的感觉，可以做舞厅的灯球了{:4_173:}

红影 发表于 2023-4-7 22:06

黑黑总能带来耳目一新的新效果，这个太美了{:4_199:}

马黑黑 发表于 2023-4-7 22:07

红影 发表于 2023-4-7 22:03
--degX2: ${aX + 360}deg; 怎么感觉任何一个角度加上360度还是它自身啊。
假如 ax = 21，则：

每一个圆圈转动的初始角度是 --degX1: 21deg; ，转一圈即 --degX2 的值则是：21 + 360

关键帧动画转完整一圈才能平滑。由于每一个圆圈的初始旋转角度不一样，所以设计了示例中的算法。

马黑黑 发表于 2023-4-7 22:09

红影 发表于 2023-4-7 22:06
黑黑总能带来耳目一新的新效果，这个太美了

我用 doodle 插件做了一个帖，但目前论坛不支持：

http://mahei.freeee.ml/art/bshow.php?st=3&sd=3&art=1680869583

马黑黑 发表于 2023-4-7 22:10

红影 发表于 2023-4-7 22:04
这个漂亮，各个角度都在转的感觉，可以做舞厅的灯球了

应该可以吧，做个装饰品背景也不错

红影 发表于 2023-4-7 22:33

马黑黑 发表于 2023-4-7 22:07
假如 ax = 21，则：

每一个圆圈转动的初始角度是 --degX1: 21deg; ，转一圈即 --degX2 的值则是：21 + ...

比如21度，无论加360还是720，都是一圈两圈后的原角度方向的吧。

红影 发表于 2023-4-7 22:35

马黑黑 发表于 2023-4-7 22:09
我用 doodle 插件做了一个帖，但目前论坛不支持：

http://mahei.freeee.ml/art/bshow.php?st=3&sd=3&a ...

哇，你帖子里的好像半径也不一样，还要漂亮。

红影 发表于 2023-4-7 22:35

马黑黑 发表于 2023-4-7 22:10
应该可以吧，做个装饰品背景也不错

看到你做成的帖子了，好漂亮啊{:4_187:}

马黑黑 发表于 2023-4-7 22:47

红影 发表于 2023-4-7 22:35
看到你做成的帖子了，好漂亮啊

还行

马黑黑 发表于 2023-4-7 22:48

红影 发表于 2023-4-7 22:35
哇，你帖子里的好像半径也不一样，还要漂亮。

doodle还是不错的

马黑黑 发表于 2023-4-7 22:48

红影 发表于 2023-4-7 22:33
比如21度，无论加360还是720，都是一圈两圈后的原角度方向的吧。

旋转就是要头尾衔接的

焱鑫磊 发表于 2023-4-7 23:50

黑黑老师棒棒哒！{:4_187:}

马黑黑 发表于 2023-4-7 23:51

焱鑫磊 发表于 2023-4-7 23:50
黑黑老师棒棒哒！

谢谢支持。晚上好

庶民 发表于 2023-4-8 06:18

这个很有趣的，点赞

红影 发表于 2023-4-9 09:12

马黑黑 发表于 2023-4-7 22:47
还行

看到这里也做了一个呢，更漂亮{:4_199:}

红影 发表于 2023-4-9 09:13

马黑黑 发表于 2023-4-7 22:48
doodle还是不错的

涂鸦，就算这里不能用，黑黑还是自己写了个，厉害{:4_199:}

红影 发表于 2023-4-9 09:14

马黑黑 发表于 2023-4-7 22:48
旋转就是要头尾衔接的

嗯嗯，这样才不乱。知道了{:4_204:}

查看完整版本: 用pencilcode写了一个3d球