html+css,动画实现“地球绕太阳旋转“

Summer_Uncle

已于 2024-01-15 17:16:40 修改

阅读量634

点赞数 15

文章标签： html css 前端

于 2024-01-15 17:13:55 首次发布

本文链接：https://blog.csdn.net/Summer_Uncle/article/details/135606165

版权

本文介绍了如何通过HTML和CSS实现一个简单的视觉效果，让一个div元素模拟地球绕太阳的旋转路径，利用CSS动画和3D变换技术来达到动态效果。

摘要由CSDN通过智能技术生成

1.效果

在这里插入图片描述

html+css实现地球绕太阳旋转

2.代码

html

  <div class="main">
    <div class="son">
      <div class="earch"></div>
    </div>
  </div>

css

.main {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

}

.main div {
  border-radius: 100%;
}

.son {
  width: 300px;
  height: 300px;
  background-color: rgb(255, 208, 75);
  position: relative;
  perspective: 800px;
  transform-style: preserve-3d;
  background-image: url('../assets/son.jpg');
  background-repeat: no-repeat;
  background-size: 120%;
  background-position: 50% 50%;
}

.earch {
  width: 80px;
  height: 80px;
  background-color: skyblue;
  position: absolute;
  top: 50%;
  left:-80%;
  transform: translate(-50%,-50%);
  animation: myEarch 2s infinite linear;
  background-image: url('../assets/earch.jpg');
  background-repeat: no-repeat;
  background-size: contain;
}

@keyframes myEarch {
  0%{
    transform: translate3d(0px,0px,0);
  }
  10%{
    transform: translate3d(140px,5px,200px);
  }
  20%{
    transform: translate3d(260px,10px,400px);
  }
  30%{
    transform: translate3d(380px,15px,400px);
  }
  40%{
    transform: translate3d(500px,10px,200px);
  }
  50%{
    transform: translate3d(640px,5px,0px);
  }
  60%{
    transform: translate3d(500px,10px,-100px);
  }
  70%{
    transform: translate3d(380px,15px,-100px);
  }
  80%{
    transform: translate3d(260px,10px,-100px);
  }
  90%{
    transform: translate3d(140px,5px,-100px);
  }
  100%{
    transform: translate3d(0px,0px,-100px);
  }
}