论坛 › 马黑黑教程专版 › 再画3d球

马黑黑 发表于 2023-1-2 19:37

再画3d球

<style>
#papa {
        margin: auto;
        width: 740px;
        height: 600px;
        display: grid;
        place-items: center;
        perspective: 3000px;
}
#mplayer {
        --size: 400px;
        width: var(--size);
        height: var(--size);
        display: grid;
        place-items: center;
        position: relative;
        transform: rotateZ(15deg);
        transform-style: preserve-3d;
        animation: rot 10s infinite linear;
        cursor: pointer;
}
.mline {
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        border: 1px dotted snow;
        background: linear-gradient(180deg,black,tan,silver);
        position: absolute;
        opacity: .75;
}
@keyframes rot { to { transform: rotateZ(15deg) rotateY(1turn); } }
</style>

<div id="papa">
        <div id="mplayer"></div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1946730995.mp3" loop autoplay></audio>
</div>

<script>
(function() {
        let total = 50;
        [...Array(total).keys()].forEach( (item,key) => {
                item = document.createElement('span');
                item.className = 'mline';
                item.style.transform= `rotateY(${360/total*key}deg)`;
                mplayer.appendChild(item);
        });
        mplayer.onclick = () => aud.paused ? (aud.play(), mplayer.style.animationPlayState = 'running') : (aud.pause(), mplayer.style.animationPlayState = 'paused');
})();
</script>

马黑黑 发表于 2023-1-2 19:39

以前，做过一个3d球，静止的时候还好，旋转了就经不起推敲。重画一个，感觉还可以

马黑黑 发表于 2023-1-2 19:40

代码

<style>
#papa {
        margin: auto;
        width: 740px;
        height: 600px;
        display: grid;
        place-items: center;
        perspective: 3000px;
}
#mplayer {
        --size: 400px;
        width: var(--size);
        height: var(--size);
        display: grid;
        place-items: center;
        position: relative;
        transform: rotateZ(15deg);
        transform-style: preserve-3d;
        animation: rot 10s infinite linear;
        cursor: pointer;
}
.mline {
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        border: 1px dotted snow;
        background: linear-gradient(180deg,black,tan,silver);
        position: absolute;
        opacity: .75;
}
@keyframes rot { to { transform: rotateZ(15deg) rotateY(1turn); } }
</style>

<div id="papa">
        <div id="mplayer"></div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1946730995.mp3" loop autoplay></audio>
</div>

<script>
(function() {
        let total = 50;
        [...Array(total).keys()].forEach( (item,key) => {
                item = document.createElement('span');
                item.className = 'mline';
                item.style.transform= `rotateY(${360/total*key}deg)`;
                mplayer.appendChild(item);
        });
        mplayer.onclick = () => aud.paused ? (aud.play(), mplayer.style.animationPlayState = 'running') : (aud.pause(), mplayer.style.animationPlayState = 'paused');
})();
</script>

红影 发表于 2023-1-2 20:05

这个漂亮。以前貌似做过线框球，这个有渲染的，漂亮{:4_199:}

红影 发表于 2023-1-2 20:10

这三种颜色搭配，出现了中间的高光的感觉呢，真漂亮{:4_199:}

马黑黑 发表于 2023-1-2 20:23

红影 发表于 2023-1-2 20:05
这个漂亮。以前貌似做过线框球，这个有渲染的，漂亮

线条构架的球做过的

马黑黑 发表于 2023-1-2 20:23

红影 发表于 2023-1-2 20:10
这三种颜色搭配，出现了中间的高光的感觉呢，真漂亮

最初做的时候用纯色，也不错

红影 发表于 2023-1-2 20:51

马黑黑 发表于 2023-1-2 20:23
线条构架的球做过的

我还跟着做过，有印象{:4_173:}

红影 发表于 2023-1-2 20:53

马黑黑 发表于 2023-1-2 20:23
最初做的时候用纯色，也不错

还是现在的配色漂亮{:4_199:}

马黑黑 发表于 2023-1-2 21:27

红影 发表于 2023-1-2 20:53
还是现在的配色漂亮

可以尝试其他颜色，包括单色

马黑黑 发表于 2023-1-2 21:27

红影 发表于 2023-1-2 20:51
我还跟着做过，有印象

这个构思简洁一点

红影 发表于 2023-1-2 21:42

马黑黑 发表于 2023-1-2 21:27
可以尝试其他颜色，包括单色

嗯嗯，肯定每种都会效果不同{:4_204:}

红影 发表于 2023-1-2 21:43

马黑黑 发表于 2023-1-2 21:27
这个构思简洁一点

是啊，看JS那么简洁的，惊奇{:4_187:}

马黑黑 发表于 2023-1-2 23:16

红影 发表于 2023-1-2 21:43
是啊，看JS那么简洁的，惊奇

这个，基本功能就是不复杂，稍后，加入一些细节，代码就会相对多一些，逻辑性也不会那么简单

马黑黑 发表于 2023-1-2 23:17

红影 发表于 2023-1-2 21:42
嗯嗯，肯定每种都会效果不同

是的。还可以加X轴线圈，就会更好看

红影 发表于 2023-1-3 22:42

马黑黑 发表于 2023-1-2 23:16
这个，基本功能就是不复杂，稍后，加入一些细节，代码就会相对多一些，逻辑性也不会那么简单

现在这个已经很不错了。

红影 发表于 2023-1-3 22:43

马黑黑 发表于 2023-1-2 23:17
是的。还可以加X轴线圈，就会更好看

哦，加了能好看么？

马黑黑 发表于 2023-1-3 23:46

红影 发表于 2023-1-3 22:43
哦，加了能好看么？

加的好会好看的

马黑黑 发表于 2023-1-3 23:46

红影 发表于 2023-1-3 22:42
现在这个已经很不错了。

还行吧

千羽 发表于 2023-1-4 21:19

这个好漂亮啊{:4_187:}

查看完整版本: 再画3d球