月色当空照缩影-html代码-BFW代码库

代码语言：html
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #2F2349;
}

.canvas {
  height: 340px;
  width: 340px;
  border: 10px solid #3B2D61;
  border-radius: 50%;
  margin: 10% auto;
  position: relative;
  background: linear-gradient(to bottom, #8652E2 0%, #6B3DA0 246px);
  overflow: hidden;
}

.moon {
  position: absolute;
  z-index: 2;
  height: 70px;
  width: 70px;
  background-color: white;
  left: 125px;
  top: 110px;
  border-radius: 50%;
  box-shadow: 0 0 15px white, 0 0 100px white;
}
.moon-bg {
  opacity: 0.5;
  border-radius: 50%;
}
.moon-bg-1, .moon-bg-2, .moon-bg-3, .moon-bg-4 {
  position: absolute;
}
.moon-bg-1 {
  height: 95px;
  width: 95px;
  left: 113px;
  top: 97px;
  background: linear-gradient(to bottom, #C785EA, #BF70E2);
}
.moon-bg-2 {
  height: 130px;
  width: 130px;
  left: 96px;
  top: 80px;
  background: linear-gradient(to bottom, #B775E1, #AE5FD6);
}
.moon-bg-3 {
  height: 170px;
  width: 170px;
  left: 78px;
  top: 61px;
  background: linear-gradient(to bottom, #944BBE, #944BBE);
}
.moon-bg-4 {
  z-index: 0;
  height: 210px;
  width: 210px;
  left: 59px;
  top: 42px;
  background: linear-gradient(to bottom, #9559DF, #8141B9);
}

.mountain-foreground, .mountain-background {
  position: absolute;
}
.mountain-foreground {
  left: 5px;
  bottom: -55px;
  z-index: 3;
}
.mountain-foreground path {
  fill: #2A165B;
}
.mountain-background {
  left: -120px;
  bottom: 25px;
  z-index: 2;
}
.mountain-background path {
  fill: #3C1872;
}

.tree-1, .tree-2, .tree-3, .tree-4, .tree-5, .tree-6, .tree-7 {
  position: absolute;
}
.tree-1 {
  z-index: 2;
  width: 35px;
  left: 10px;
  bottom: 100px;
}
.tree-1 path {
  fill: #3C1872;
}
.tree-2 {
  z-index: 2;
  width: 25px;
  left: 40px;
  bottom: 105px;
}
.tree-2 path {
  fill: #3C1872;
}
.tree-3 {
  z-index: 3;
  width: 60px;
  left: 50px;
  bottom: 15px;
}
.tree-3 path {
  fill: #140D35;
}
.tree-4 {
  z-index: 3;
  width: 90px;
  left: 100px;
  bottom: 0px;
}
.tree-4 path {
  fill: #140D35;
}
.tree-5 {
  z-index: 3;
  width: 90px;
  left: 165px;
  bottom: 8px;
}
.tree-5 path {
  fill: #140D35;
}
.tree-6 {
  z-index: 1;
  width: 25px;
  right: 10px;
  bottom: 130px;
}
.tree-6 path {
  fill: #301763;
}
.tree-7 {
  z-index: 1;
  width: 15px;
  right: 0px;
  bottom: 125px;
}
.tree-7 path {
  fill: #301763;
}

.star {
  background: white;
  position: absolute;
  left: 100px;
  top: 20px;
  border-radius: 25%;
  animation: startwinkle 5s infinite linear;
  opacity: 0.5;
}
.star.star-1 {
  left: 150px;
}
.star.star-2 {
  left: 170px;
  top: 60px;
}
.star.star-3 {
  left: 130px;
  top: 80px;
}
.star.star-4 {
  left: 90px;
  top: 80px;
}
.star.star-5 {
  left: 179px;
  top: 90px;
}
.star.star-6 {
  left: 136px;
  top: 97px;
}
.star.star-7 {
  left: 150px;
  top: 97px;
}
.star.star-8 {
  left: 200px;
  top: 95px;
}
.star.star-9 {
  left: 260px;
  top: 95px;
}
.star.star-10 {
  left: 37px;
  top: 100px;
}
.star.star-11 {
  left: 35px;
  top: 80px;
}
.star.star-12 {
  left: 25px;
  top: 90px;
}
.star.star-13 {
  left: 25px;
  top: 135px;
}
.star.star-14 {
  left: 25px;
  top: 118px;
}
.star.star-15 {
  left: 10px;
  top: 123px;
}
.star.star-16 {
  left: 135px;
  top: 23px;
}
.star.star-17 {
  left: 140px;
  top: 10px;
}
.star.star-18 {
  left: 200px;
  top: 36px;
}
.star.star-19 {
  left: 215px;
  top: 37px;
}
.star.star-20 {
  left: 219px;
  top: 30px;
}
.star.star-21 {
  left: 230px;
  top: 80px;
}
.star.star-22 {
  left: 230px;
  top: 150px;
}
.star.star-23 {
  left: 226px;
  top: 158px;
}
.star.star-24 {
  left: 250px;
  top: 136px;
}
.star.star-25 {
  left: 273px;
  top: 123px;
}
.star.star-26 {
  left: 298px;
  top: 93px;
}
.star.star-27 {
  left: 296px;
  top: 136px;
}
.star.star-28 {
  left: 279px;
  top: 150px;
}
.star.star-29 {
  left: 85px;
  top: 29px;
}
.star.star-30 {
  left: 83px;
  top: 46px;
}

.opacity-half {
  opacity: 0.5;
}

.opacity-quarter {
  opacity: 0.25;
}

@keyframes startwinkle {
  0% {
    opacity: 0.0;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    opacity: 0.0;
  }
}
.star:nth-child(1) {
  height: 2px;
  width: 2px;
  animation-delay: -0.3s;
}

.star:nth-child(2) {
  height: 2px;
  width: 2px;
  animation-delay: -0.6s;
}

.star:nth-child(3) {
  height: 1px;
  width: 1px;
  animation-delay: -0.9s;
}

.star:nth-child(4) {
  height: 2px;
  width: 2px;
  animation-delay: -1.2s;
}

.star:nth-child(5) {
  height: 2px;
  width: 2px;
  animation-delay: -1.5s;
}

.star:nth-child(6) {
  height: 1px;
  width: 1px;
  animation-delay: -1.8s;
}

.star:nth-child(7) {
  height: 2px;
  width: 2px;
  animation-delay: -2.1s;
}

.star:nth-child(8) {
  height: 1px;
  width: 1px;
  animation-delay: -2.4s;
}

.star:nth-child(9) {
  height: 2px;
  width: 2px;
  animation-delay: -2.7s;
}

.star:nth-child(10) {
  height: 2px;
  width: 2px;
  animation-delay: -3s;
}

.star:nth-child(11) {
  height: 1px;
  width: 1px;
  animation-delay: -3.3s;
}

.star:nth-child(12) {
  height: 1px;
  width: 1px;
  animation-delay: -3.6s;
}

.star:nth-child(13) {
  height: 2px;
  width: 2px;
  animation-delay: -3.9s;
}

.star:nth-child(14) {
  height: 1px;
  width: 1px;
  animation-delay: -4.2s;
}

.star:nth-child(15) {
  height: 2px;
  width: 2px;
  animation-delay: -4.5s;
}

.star:nth-child(16) {
  height: 2px;
  width: 2px;
  animation-delay: -4.8s;
}

.star:nth-child(17) {
  height: 1px;
  width: 1px;
  animation-delay: -5.1s;
}

.star:nth-child(18) {
  height: 1px;
  width: 1px;
  animation-delay: -5.4s;
}

.star:nth-child(19) {
  height: 2px;
  width: 2px;
  animation-delay: -5.7s;
}

.star:nth-child(20) {
  height: 1px;
  width: 1px;
  animation-delay: -6s;
}

.star:nth-child(21) {
  height: 1px;
  width: 1px;
  animation-delay: -6.3s;
}

.star:nth-child(22) {
  height: 2px;
  width: 2px;
  animation-delay: -6.6s;
}

.star:nth-child(23) {
  height: 1px;
  width: 1px;
  animation-delay: -6.9s;
}

.star:nth-child(24) {
  height: 2px;
  width: 2px;
  animation-delay: -7.2s;
}

.star:nth-child(25) {
  height: 1px;
  width: 1px;
  animation-delay: -7.5s;
}

.star:nth-child(26) {
  height: 1px;
  width: 1px;
  animation-delay: -7.8s;
}

.star:nth-child(27) {
  height: 2px;
  width: 2px;
  animation-delay: -8.1s;
}

.star:nth-child(28) {
  height: 1px;
  width: 1px;
  animation-delay: -8.4s;
}

.star:nth-child(29) {
  height: 2px;
  width: 2px;
  animation-delay: -8.7s;
}

.star:nth-child(30) {
  height: 2px;
  width: 2px;
  animation-delay: -9s;
}
</style>
<script>
  window.console = window.console || function(t) {};
</script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</head>
<body translate="no">
<body>
<div class="canvas">
<div class="stars">
<div class="star star-1 opacity-quarter"></div>
<div class="star star-2 opacity-quarter"></div>
<div class="star star-3 opacity-half"></div>
<div class="star star-4 opacity-half"></div>
<div class="star star-5 opacity-half"></div>
<div class="star star-6 opacity-half"></div>
<div class="star star-7"></div>
<div class="star star-8 opacity-quarter"></div>
<div class="star star-9 opacity-quarter"></div>
<div class="star star-10"></div>
<div class="star star-11"></div>
<div class="star star-12 opacity-half"></div>
<div class="star star-13 opacity-quarter"></div>
<div class="star star-14 opacity-quarter"></div>
<div class="star star-15"></div>
<div class="star star-16 opacity-half"></div>
<div class="star star-17"></div>
<div class="star star-18 opacity-half"></div>
<div class="star star-19"></div>
<div class="star star-20"></div>
<div class="star star-21"></div>
<div class="star star-22"></div>
<div class="star star-23"></div>
<div class="star star-24"></div>
<div class="star star-25"></div>
<div class="star star-26"></div>
<div class="star star-27"></div>
<div class="star star-28"></div>
<div class="star star-29"></div>
<div class="star star-30"></div>
</div>
<div class="moon"></div>
<div class="moon-bg moon-bg-1"></div>
<div class="moon-bg moon-bg-2"></div>
<div class="moon-bg moon-bg-3"></div>
<div class="moon-bg moon-bg-4"></div>
<section>
<svg class="mountain-background" id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 211 84"><title>Mountain Background</title>
<path class="cls-1" d="M1076.8,487.24,1069,481l-10-8a35.71,35.71,0,0,1-4.75-4.38,8.91,8.91,0,0,1-1.58-2.78c-1.41-3.79-5.73-7.35-7.19-8.48a5.71,5.71,0,0,0-1-.6c-2.07-1-10-4.76-13.5-4.76s-5.3,2.11-7,4.56a5.89,5.89,0,0,0-1,3.07c-.28,5.53-2,6.37-2,6.37s-1.53.77-3.26,3.64a5.89,5.89,0,0,0-.77,2.69c-.22,4-1.73,6.83-9.65,11a5.72,5.72,0,0,1-2.62.69c-18.37.37-51.34,8.2-57.64,9.73a5.61,5.61,0,0,0-1.87.83c-1.27.87-3.75,2.43-5.19,2.43a18.47,18.47,0,0,0-4.54,1h0S918,502,912,502s-9-2-14-2-9-2-12,0-11,1-11,1h-7v35h205.12a5.87,5.87,0,0,0,5.88-5.87V491.82A5.87,5.87,0,0,0,1076.8,487.24Z" transform="translate(-868 -452)" />
</svg>
</section>
<section>
<svg class="mountain-foreground" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.08 88.67"><title>MountainForeground</title>
<path class="cls-1" d="M1093.08,507.34s-.06-.09-.08-.14V507l-.13,0c-2.49-3.43-24.09-13.63-31.79-13.63-8,0-9,0-13-1-2-2-15-10-15-10s-10-8-19-14c-8-7-14,0-18,3s-21,12-21,12-5,8-7,10a12.6,12.6,0,0,1-4.8,2.43L961,496v58h132V507.5A.17.17,0,0,0,1093.08,507.34Z" transform="translate(-961 -465.33)" />
</svg>
</section>
<svg class="tree-1" data-name="Layer 4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.59 23.29"><title>Tree1</title><path class="cls-1" d="M726.13,550.63c0-.11-.07-.18,0-.27a2.55,2.55,0,0,1,.4-.32c.08,0,.22-.13.29,0s0,.19-.1.26-.1.15,0,.19.13.1.05.21-.1.08-.06.16.19,0,.23-.07.07-.19.19-.19.16.09.22.19a.51.51,0,0,0,.52.32c.14,0,.21,0,.15-.22s-.06-.22,0-.3c.12.14.13.33.3.42s.15.15.26.07a2.52,2.52,0,0,1,1-.41c0,.13,0,.26.17.19.05,0,.06,0,.06.07,0,.27.23.27.46.23-.15,0-.26-.07-.12-.2a3.08,3.08,0,0,0,.33-.3.15.15,0,0,1,.18,0,.14.14,0,0,1,.06.17c0,.08-.09.15.06.16s.23,0,.3-.09.16-.22.34-.17l.06,0c.1,0,.22-.19.24,0s-.24.38-.39.41a1.37,1.37,0,0,1,.64.1c-.08-.11-.18-.19-.12-.33s.13,0,.22,0a4.92,4.92,0,0,0-.49-1.55,1.24,1.24,0,0,0-.51-.45.26.26,0,0,0-.24,0c-.13.09-.21.1-.27-.06s-.05-.07-.1-.05l-.08.08s0,.07.07.08a.11.11,0,0,1,.07,0c.05.11.24,0,.19.18s-.19.15-.3.19a.89.89,0,0,1-.64-.13c-.09,0,0-.09,0-.13s.19-.11.13-.23-.14-.09-.26-.07a.58.58,0,0,0-.31.11.17.17,0,0,1-.14,0c-.27-.16-.38,0-.57.16s-.18.22-.33.28a.39.39,0,0,0-.53.18c0,.07-.06.13-.15.09s-.14-.09-.1-.21a.9.9,0,0,1,.22-.34c-.25-.08-.12-.16-.07-.38s.2-.13.28,0,.06,0,.08,0,.17-.17.2-.3-.18,0-.27,0a.55.55,0,0,1-.5-.1c-.08-.09-.11-.08-.19,0s-.15.15-.23.06,0-.18.06-.27a.28.28,0,0,1,.22-.13,1.12,1.12,0,0,0,.35-.12c-.21-.12-.37-.24-.36-.49s.06-.29,0-.44h.17a7.9,7..........完整代码请登录后点击上方下载按钮下载查看
月色当空照缩影

网友评论0

div+Css布局实现小球立体阴影效果代码

div+css布局实现炫酷立体质感小黄灯指示开关checkbox代码

div+css布局卡片拐角丝带装饰代码

div+css布局实现时间轴大事记代码

css+div实现可拖动移动棋子的中国象棋棋盘代码

css实现水中月倒影代码

div+ccs实现招聘求职类app的ui原型图代码

css布局实现河边倒影昼夜切换效果代码

div+css布局实现玻璃材质简洁发光按钮效果代码

css+svg图片内阴影效果代码
