js css 实现动画 背景星空 地球飘过
时间: 2023-06-03 10:02:07 浏览: 212
CSS3全屏悬浮星空背景特效
可以使用CSS3的animation属性来实现背景星空和地球的动画效果。具体实现方法可以参考以下代码:
HTML代码:
```
<div id="stars"></div>
<div id="earth"></div>
```
CSS3代码:
```
#stars {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: #000000 url('star.png') repeat top center; /*星空背景图片*/
animation: animateStars 50s linear infinite; /*星空动画效果*/
}
@keyframes animateStars {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -5000px; /*星空向上滚动*/
}
}
#earth {
position: absolute;
top: 50%;
left: 50%;
margin-left: -40px;
margin-top: -40px;
width: 80px;
height: 80px;
background: url('earth.png') no-repeat center center; /*地球图片*/
animation: rotateEarth 20s linear infinite; /*地球转动动画*/
}
@keyframes rotateEarth {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg); /*地球顺时针旋转一圈*/
}
}
```
使用以上HTML和CSS代码可以实现一个带背景星空和地球的动画效果。
阅读全文