在網頁設計中，炫酷的效果總是能吸引用戶的目光。今天，我們介紹一種用HTML實現的炫酷地球效果。下面是代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>炫酷地球效果示例</title>
<style>
body {
margin:0;
padding:0;
background-color: #000;
}
#earth {
width: 400px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
background: #000 url("https://images.unsplash.com/photo-1484712401471-05dcfef5a204") no-repeat center center;
background-size: cover;
border-radius: 50%;
box-shadow: 0 0 80px 30px #FFF;
animation: earthRotate 20s linear infinite;
transition: all 3s ease-in-out;
}
#earth:hover {
transform: scale(1.1);
box-shadow: 0 0 150px 40px #FFFF99;
}
#earth:after {
content: "";
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background: url("https://www.w3schools.com/css/planets.gif") no-repeat center center fixed;
background-size: 100% 100%;
animation: animateLight 20s linear infinite;
}
@keyframes earthRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes animateLight {
from {
opacity: 0.5;
}
to {
opacity: 0;
}
}
</style>
</head>
<body>
<div id="earth"></div>
</body>
</html>首先，我們在HTML中定義了一個id為"earth"的div元素，設置其寬和高為400像素，并將位置固定在屏幕中央。我們利用CSS的border-radius屬性將其設為圓形，并通過background屬性設置其背景為地球貼圖。
接著，我們通過CSS的box-shadow屬性添加了一個白色的光暈效果，讓整個地球看起來更有立體感。另外，我們為其添加了一個旋轉動畫，讓地球不斷自轉。
在:hover偽類中，我們增加了一個縮放效果和另一種光暈效果，給用戶帶來更加炫酷的互動體驗。
最后，我們利用CSS的:before偽類添加了閃電效果，讓地球更加逼真。通過animation屬性，我們定義了一個動畫讓閃電不斷出現和消失。
這是一個簡單的HTML代碼，卻能夠實現令人炫目的地球效果，相信你也能夠輕松地將它添加到你的網頁設計中。