h5+css中秋月亮动画

最新推荐文章于 2024-09-12 19:55:46 发布

console.aike

最新推荐文章于 2024-09-12 19:55:46 发布

阅读量128

点赞数

分类专栏：中秋月亮 css 代码月亮文章标签： css 前端

本文链接：https://blog.csdn.net/aike420/article/details/133415897

版权

中秋月亮同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

代码月亮

1 篇文章 0 订阅

订阅专栏

昨晚的中秋节月亮都看了吧，那今天我们用代码写出个月亮吧

先瞧瞧效果图吧

废话不说直接上代码

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>月亮</title>
  <style>
    body{
  background-color:#2a003f;
}
.donghua{
  width: 668px;
  height: 500px;
  position: absolute;
  top:50%;
  left: 50%;
  margin: -250px 0 0 -334px;
  background-color: #2a003f;
  overflow: hidden;
}

.fuhao{
  width: 100%;
  height: 100%;
  position: absolute;
}
.fuhao div:nth-child(odd){
  animation: hua 0.6s ease-in-out 0s , fudong 4s linear 0.6s infinite;
}
.fuhao div:nth-child(even){
  animation:hua2 0.6s ease-in-out 0s , fudong 6s linear 0.6s infinite
}
@keyframes hua {
  0%{transform: translateY(500px);}
  100%{transform: translateY(0px);}
}
@keyframes hua2 {
  0%{transform: translateY(-500px);}
  100%{transform: translateY(0px);}
}
@keyframes fudong {
  0%{transform: translateY(0px);}
  50%{transform: translateY(9px);}
  100%{transform: translateY(0px);}
}

.o{
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50px;
}
.o1{
  left: 145px;
  top: 320px;
  border: 5px #fff solid;
}
.o2{
  left: 223px;
  top: 273px;
  border: 5px #fcc010 solid;
}
.o3{
  left: 476px;
  top: 216px;
  border: 5px #3cfaf7 solid;
}
.o4{
  left: 430px;
  top: 350px;
  border: 5px #fff solid;
}
.x{
  position: absolute;
  width: 20px;
  height: 6px;
  border-radius: 50px;
}
.x::before{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  transform: rotate(90deg);
}
.x1{
  left: 178px;
  top: 169px;
  background-color: #3cfaf7;
}
.x1::before{
  background-color: #3cfaf7;
}
.x2{
  left: 395px;
  top: 140px;
  background-color: #ffbf02;
}
.x2::before{
  background-color: #ffbf02;
}
.x3{
  left: 230px;
  top: 368px;
  background-color: #ffbf02;
}
.x3::before{
  background-color: #ffbf02;
}
.d{
  width: 5px;
  height: 5px;
  position: absolute;
  border-radius: 5px;
  background-color: #fae527;
}
.d1{
  left: 290px;
  top: 101px;
  transform-origin:left 30px;
}

.d2{
  left: 495px;
  top: 150px;
}
.d3{
  left: 166px;
  top: 226px;
}
.d4{
  left: 540px;
  top: 280px;
}
.d5{
  left: 295px;
  top: 417px;
  background-color: #3cfaf7;
}
.d6{
  left: 405px;
  top: 400px;
}


.yueliang{
  width: 100%;
  height: 100%;
  position: absolute;
}
.yue{
  width: 160px;
  height: 160px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -80px 0 0 -80px;
  background-color: #fcc000;
  border-radius: 100px;
  transform: scale(0,0);
  animation: da 0.3s ease-out 0.6s forwards;
}
@keyframes da {
  0%{transform: scale(0,0);}
  100%{transform:  scale(1,1);}
}
.yue::before{
  content: "";
  display: block;
  position: absolute;
  top: 8px;
  left: 10px;
  width: 130px;
  height: 135px;
  background-color: #fae62d;
  border-radius: 60% 40% 60% 40%;
}
.yan{
  width: 12px;
  height: 12px;
  position: absolute;
  top: 66px;
  left: 50px;
  background-color: #411641;
  border-radius: 20px;
  animation: zhayan 4s linear 1s infinite;
}
.yan::before{
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  position: absolute;
  left: 38px;
  background-color: #411641;
  border-radius: 20px;
}
@keyframes zhayan {
  0%{transform: scale(1,1)}
  5%{transform: scale(1,0)}
  10%{transform: scale(1,1)}
  15%{transform: scale(1,1)}
  20%{transform: scale(1,0)}
  25%{transform: scale(1,1)}
  100%{transform: scale(1,1)}
}

.zui{
  width: 10px;
  height: 8px;
  position: absolute;
  top: 70px;
  left: 65px;
  border: 5px solid #411641;
  border-radius: 50px;
  border-top-color: transparent;
}
.hong{
  width: 12px;
  height: 9px;
  position: absolute;
  top: 82px;
  left: 45px;
  background-color: #fd7e34;
  border-radius: 20px;
  opacity: 0;
  animation: saihong 2s linear 1.8s forwards;
}
.hong::before{
  content: "";
  display: block;
  width: 12px;
  height: 9px;
  position: absolute;
  left: 48px;
  background-color: #fd7e34;
  border-radius: 20px;
}
@keyframes saihong {
  0%{opacity: 0}
  100%{opacity: 1}
}
.guangying{
  width: 100%;
  height: 100%;
  position: absolute;
}
.guang{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #62332d;
  border-radius: 200px;
}
.g1{
  width: 200px;
  height: 200px;
  opacity: 1;
  transform: scale(0,0);
  animation:g-da 0.2s ease-out 0.7s forwards , guan1 2s linear 1.5s infinite;
}
.g2{
  width: 240px;
  height: 240px;
  opacity: 0.6;
  transform: scale(0,0);
  animation:g-da 0.2s ease-out 0.7s forwards , guan2 3s linear 1.5s infinite;
}
.g3{
  width: 290px;
  height: 290px;
  opacity: 0.3;
  transform: scale(0,0);
  animation:g-da 0.3s ease-out 0.7s forwards , guan1 2s linear 1.5s infinite;
}
.g4{
  width: 330px;
  height: 330px;
  opacity: 0.2;
  transform: scale(0,0);
  animation:g-da 0.4s ease-out 0.7s forwards , guan2 2s linear 1.5s infinite;
}
.g5{
  width: 370px;
  height: 370px;
  opacity: 0.1;
  transform: scale(0,0);
  animation:g-da 0.5s ease-out 0.7s forwards , guan1 2s linear 1.5s infinite;
}
@keyframes g-da {
0%{transform: translate(-50%,-50%) scale(0,0);}
100%{transform: translate(-50%,-50%) scale(1,1);}
}


@keyframes guan1 {
  0%{border-radius: 200px;transform:translate(-50%,-50%) scale(1,1) ;}
  35%{border-radius: 200px 150px 200px 150px;transform:translate(-50%,-50%)scale(0.95,0.95)}
  70%{border-radius: 150px 200px 150px 200px;transform:translate(-50%,-50%)scale(0.95,0.95)}
  100%{border-radius: 200px;transform: translate(-50%,-50%)scale(1,1)}
}
@keyframes guan2 {
  0%{border-radius: 200px;transform:translate(-50%,-50%)scale(1,1) ;}
  35%{border-radius: 150px 200px 150px 200px;transform:translate(-50%,-50%)scale(0.95,0.95)}
  70%{border-radius: 200px 150px 200px 150px;transform:translate(-50%,-50%)scale(0.95,0.95)}
  /*50%{border-radius: 120px 180px 120px 180px;transform:translate(-50%,-50%)scale(0.95,0.95)}*/
  100%{border-radius: 200px;transform: translate(-50%,-50%)scale(1,1)}
}
  </style>

</head>
<body>
<div class="donghua">

      <div class="guangying">

        <div class="guang g1"></div>
        <div class="guang g2"></div>
        <div class="guang g3"></div>
        <div class="guang g4"></div>
        <div class="guang g5"></div>

      </div>

      <div class="fuhao">
        <div class="o o1"></div>
        <div class="o o2"></div>
        <div class="o o3"></div>
        <div class="o o4"></div>
        <div class="x x1"></div>
        <div class="x x2"></div>
        <div class="x x3"></div>
        <div class="d d1"></div>
        <div class="d d2"></div>
        <div class="d d3"></div>
        <div class="d d4"></div>
        <div class="d d5"></div>
        <div class="d d6"></div>
      </div>

      <div class="yueliang">
        <div class="yue">
          <div class="yan"></div>
          <div class="zui"></div>
          <div class="hong"></div>
        </div>
      </div>


    </div>
<!-- partial -->
  
</body>
</html>