3D炫彩地球可以為我們帶來非常酷炫的效果，下面是一個使用HTML、CSS和JavaScript代碼實現的3D炫彩地球示例，讓我們一起來看看：
<!DOCTYPE html>
<html>
<head>
<title>3D炫彩地球</title>
<style>
#earth {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform: translateZ(-70px) rotateY(0deg) rotateX(30deg);
}
#earth:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("地球紋理圖.jpg");
background-size: cover;
border-radius: 50%;
opacity: 0.9;
}
#earth:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.05);
border-radius: 50%;
box-shadow: 0 0 20px 2px white, 0 0 40px 4px white, 0 0 60px 6px white;
}
</style>
</head>
<body>
<div id="earth"></div>
<script>
var earth = document.getElementById('earth');
var tx = 0, ty = 0, d = 0;
setInterval(function () {
earth.style.transform = 'translateZ(-70px) rotateY(' + (tx+=0.5) + 'deg) rotateX(' + (ty+=0.2) + 'deg)';
}, 30);
window.onmousemove = function(e){
var cx = window.innerWidth/2,
cy = window.innerHeight/2,
dx = e.clientX - cx,
dy = e.clientY - cy;
d = Math.sqrt(dx*dx + dy*dy);
ty = dy/d * 20;
tx = dx/d * -20;
}
</script>
</body>
</html>以上代碼中，我們首先通過CSS來定義了地球的樣式，包括地球的位置、大小、紋理、以及透明度等屬性。在樣式中我們使用了transform屬性來進行3D變換，從而呈現出3D效果。而JavaScript代碼中我們則定義了地球的動態效果，通過不斷的旋轉地球的方式，讓地球看上去更加生動。除此之外，我們還定義了鼠標事件，當鼠標移動時，地球也會根據鼠標的位置而動態調整其旋轉的方向，進一步增強了地球的立體感。
總的來說，通過HTML、CSS和JavaScript代碼的組合，我們可以非常方便地實現3D炫彩地球效果，不僅能夠為我們帶來非常酷炫的視覺效果，還能夠通過動態效果和鼠標事件等交互方式，增加用戶體驗，使網站更加生動有趣。
上一篇css圖片居底部