HTML3 是一種過(guò)時(shí)的 HTML 格式，其中包含了很多有趣的特效，比如地球特效。下面是其中一個(gè)簡(jiǎn)單的地球特效代碼：
<!DOCTYPE html>
<html>
<head>
<title>地球特效</title>
<style>
#container {
width: 100px;
height: 100px;
perspective: 1000px;
}
#earth {
width: 100%;
height: 100%;
background-image: url("earth.png");
background-size: 100% 100%;
border-radius: 50%;
transform-style: preserve-3d;
animation: rotate 10s linear infinite;
}
@keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div id="container">
<div id="earth"></div>
</div>
</body>
</html>這段代碼包括了一個(gè) div 容器和一個(gè)帶有背景圖片的圓形 div，即地球。通過(guò) CSS 中的 perspective 屬性，可以使得容器變成三維空間。通過(guò) transform-style: preserve-3d 屬性，可以保持子元素（即地球）的 3D 形式。通過(guò) animation 屬性，可以讓地球旋轉(zhuǎn)起來(lái)。
這是一個(gè)簡(jiǎn)單而有趣的 HTML3 地球特效代碼，可以讓你在學(xué)習(xí) HTML3 的同時(shí)，感受到科技的魅力。上一篇sass在vue
下一篇jquery is的作用