效果如图所示
3D动态球体
技术点:css的animation属性的使用以及js对dom的操作
代码分享
<main>
<div id="sphere" class="sphere"></div>
</main>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
html {
background: #141414;
}
body {
display: flex;
flex-direction: column;
background-color: #141414;
background: linear-gradient(147deg, rgb(18, 34, 42), #040404 53%);
color: #fff;
overflow: auto;
}
main {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex: 1 1 auto;
overflow: auto;
}
.sphere {
position: relative;
width: 70%;
height: 70%;
margin: 0 auto;
transform-style: preserve-3d;
/* 持续100s 无线循环播放 匀速 */
animation: rotate 100s infinite linear;
}
.line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px dotted #06e0fd;
box-shadow: 1px 0 20px -2px rgba(0, 0, 0, 0), 1px 0 50px -20px #06fdd4;
}
@keyframes rotate {
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
const sphere = document.getElementById("sphere");
const rows = []
for (let i = 0; i < 180; i += 9) {
rows.push(`<div class="line" style="transform:rotateY(${i}deg)"></div>`)
}
sphere.innerHTML = rows.join("")