用HTML实现旋转地球,使用CSS3和贴图实现的旋转的蓝色地球
时间: 2024-06-08 15:11:58 浏览: 161
以下是一个简单的使用 HTML 和 CSS3 实现旋转地球的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>旋转地球</title>
<style>
/* 定义旋转的动画 */
@keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
/* 定义地球的样式 */
.earth {
width: 200px;
height: 200px;
background-image: url(https://i.imgur.com/2FQ4G7P.jpg); /* 使用贴图 */
border-radius: 50%;
animation: rotate 10s linear infinite; /* 给地球增加旋转动画 */
}
</style>
</head>
<body>
<div class="earth"></div>
</body>
</html>
```
在这个示例中,我们使用了 `@keyframes` 规则定义了一个名为 `rotate` 的动画,它会使元素在 Y 轴方向上旋转 360 度。然后,我们使用 `.earth` 类来定义地球的样式,其中包括使用贴图、圆形边框和旋转动画。最后,我们在 HTML 中创建一个 `div` 元素,并将其类设置为 `earth`,以显示旋转的地球。
你可以将上面的代码复制到一个 HTML 文件中并在浏览器中打开它来查看效果。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)