div+css布局实现月兔月亮中秋之夜效果代码-html代码-BFW代码库

div+css布局实现月兔月亮中秋之夜效果代码

代码语言：html

代码描述：div+css布局实现月兔月亮中秋之夜效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background: linear-gradient(to right, #1e3c72, #2a5298);
  justify-content: center;
  align-items: center;
  display: flex;
  height: 100vh;
}
.circle {
  width: 450px;
  height: 450px;
  position: relative;
  background: #1a3469;
  box-shadow: 0 50px 40px rgba(0,0,0,0.5), 0 20px 10px rgba(0,0,0,0.3);
  border-radius: 100%;
  overflow: hidden;
}
.moon {
  background: #ffa62b;
  position: absolute;
  width: 180px;
  height: 180px;
  top: 18%;
  left: 40%;
  border-radius: 100%;
}
.moon2 {
  background: #ffe05d;
  position: absolute;
  width: 160px;
  height: 160px;
  top: 19%;
  left: 44%;
  border-radius: 100%;
}
.crater1 {
  position: absolute;
  background: #ffa62b;
  width: 40px;
  height: 40px;
  top: 23%;
  left: 61%;
  border-radius: 100%;
}
.crater2 {
  position: absolute;
  background: #ffa62b;
  width: 20px;
  height: 20px;
  top: 38%;
  left: 56%;
  border-radius: 100%;
}
.crater3 {
  position: absolute;
  background: #ffa62b;
  width: 10px;
  height: 10px;
  top: 36%;
  left: 70%;
  border-radius: 100%;
}
.land1 {
  position: absolute;
  background: linear-gradient(238deg, rgba(25,42,79,0.9865079820990896) 54%, rgba(49,110,49,1) 100%);
  width: 200px;
  height: 180px;
  top: 76%;
  left: 52%;
  clip-path: polygon(0% 0%, 85% 0, 73% 58%, 75% 100%, 0% 100%);
  transform: rotate(180deg);
}
.land2 {
  position: absolute;
  
background: linear-gradient(85deg, rgba(37,61,112,1) 54%, rgba(59,129,59,1) 100%);
  top: 60%;
  left: 68%;
  width: 150px;
  height: 150px;
  border-radius: 50% 100% 100% 0% / 62% 51% 49% 38%;
transform: rotate(210deg) skew(-39deg, -6deg);
}
.land3 {
  position: absolute;
  background: linear-gradient(180deg, rgba(13,42,92,1) 54%, rgba(49,110,49,1) 100%);
  width: 200px;
  height: 150px;
  top: 74%;
  left: 9%;
  clip-path: polygon(0% 0%, 85% 0, 73% 58%, 75% 100%, 0% 100%);
}
.land4 {
  position: absolute;
  background: linear-gradient(0deg, rgba(40,60,134,1) 24%, rgba(50,96,112,1) 46%, rgba(62,138,86,1) 73%, rgba(69,162,71,1) 87%);
  top: 50%;
  left: -8%;
  width: 200px;
  height: 200px;
  border-radius: 50% 100% 100% 0% / 62% 51% 49% 38%;
transform: rotate(32deg) skew(-36deg, -16deg);
}
.shadow {
  background: linear-gradient(to right, #757f9a, #d7dde8);
  opacity: 0.4;
  position: absolute;
  clip-path: ellipse(25% 40% at 50% 50%);
  top: 65%;
  left: 25%;
  width: 75px;
  height: 30px;
  transform: skew(-.........完整代码请登录后点击上方下载按钮下载查看