html--壮硕的兔子

html 复制代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>body {
  background: radial-gradient(#c7bdcb, #673d72, #070b18) no-repeat fixed;
}

.stars-container {
  position: absolute;
  left: 5%;
  top: 8%;
  width: 90vw;
  height: 38vh;
}

.star {
  position: relative;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  -webkit-filter: blur(6px);
          filter: blur(6px);
  background-color: white;
}
.star.star-1 {
  top: 10%;
  left: 20%;
  -webkit-animation: pulsing-star 1.8s 300ms infinite;
          animation: pulsing-star 1.8s 300ms infinite;
}
.star.star-2 {
  top: 35%;
  left: 30%;
  width: 0.5rem;
  height: 0.5rem;
  -webkit-filter: blur(3px);
          filter: blur(3px);
}
.star.star-3 {
  top: 12%;
  left: 63%;
  width: 0.8rem;
  height: 0.8rem;
  -webkit-animation: pulsing-star 1.6s 400ms infinite;
          animation: pulsing-star 1.6s 400ms infinite;
}
.star.star-4 {
  top: 22%;
  left: 80%;
  width: 0.4rem;
  height: 0.4rem;
  -webkit-filter: blur(3px);
          filter: blur(3px);
}
.star.star-5 {
  left: 53%;
  bottom: 5%;
  width: 0.3rem;
  height: 0.3rem;
  -webkit-filter: blur(2px);
          filter: blur(2px);
}
.star.star-6 {
  left: 12%;
  top: 45%;
  width: 0.6rem;
  height: 0.6rem;
  -webkit-animation: pulsing-star 1.8s infinite;
          animation: pulsing-star 1.8s infinite;
}
.star.star-7 {
  left: 39%;
  top: 3%;
  width: 0.7rem;
  height: 0.7rem;
  -webkit-animation: pulsing-star 2s 100ms infinite;
          animation: pulsing-star 2s 100ms infinite;
}
.star.star-8 {
  left: 73%;
  bottom: 19%;
  width: 0.2rem;
  height: 0.2rem;
  -webkit-filter: blur(1px);
          filter: blur(1px);
}
.star.star-9 {
  left: 6%;
  width: 0.2rem;
  height: 0.2rem;
  -webkit-filter: blur(2px);
          filter: blur(2px);
}
.star.star-10 {
  left: 90%;
  top: 25%;
  -webkit-filter: blur(8px);
          filter: blur(8px);
  -webkit-animation: pulsing-star 1.9s infinite ease-out;
          animation: pulsing-star 1.9s infinite ease-out;
}

@-webkit-keyframes pulsing-star {
  5% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  30% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes pulsing-star {
  5% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  30% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.naru-container {
  position: relative;
  width: 35rem;
  height: 35rem;
  margin: 8% auto 0;
}

.log {
  position: absolute;
  top: 63%;
  left: -15%;
  width: 50rem;
  height: 9rem;
  border-radius: 15%;
  background: -webkit-gradient(linear, left top, left bottom, from(#8b5d5b), color-stop(black), to(#3e2929));
  background: linear-gradient(#8b5d5b, black, #3e2929);
}

.log-end {
  position: absolute;
  top: 20%;
  width: 0.8rem;
  height: 6rem;
  background-color: red;
  border-bottom-right-radius: 100px;
  border-top-right-radius: 100px;
  background-color: #634241;
  -webkit-filter: blur(2px);
          filter: blur(2px);
}
.log-end.log-end-right {
  left: 98%;
  top: 13%;
  height: 6.7rem;
  background-color: #6c4847;
}

.moss-patch {
  position: absolute;
  top: 20%;
  left: 80%;
  width: 6rem;
  height: 1rem;
  border-radius: 50%;
  -webkit-filter: blur(1px);
          filter: blur(1px);
}
.moss-patch.second-patch {
  top: 26%;
  left: 80%;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.moss-patch .main-moss {
  position: absolute;
  left: 50%;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  background-color: #5a7759;
}
.moss-patch .main-moss.moss-1 {
  width: 0.8rem;
  height: 0.8rem;
  left: 40%;
  background-color: #658564;
}
.moss-patch .main-moss.moss-2 {
  left: 30%;
}
.moss-patch .main-moss.moss-3 {
  width: 0.8rem;
  height: 0.8rem;
  left: 25%;
  top: 2%;
}
.moss-patch .main-moss.moss-4 {
  left: 20%;
  top: 1%;
  background-color: #4f684e;
}
.moss-patch .main-moss.moss-5 {
  left: 8%;
}

.mushroom {
  position: absolute;
  width: 7rem;
  height: 3rem;
}
.mushroom .mushroom-cap {
  position: absolute;
  bottom: 80%;
  left: 30%;
  width: 1rem;
  height: 2rem;
  border-bottom-right-radius: 100px;
  border-top-right-radius: 100px;
  background-color: #9894c3;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}
.mushroom .mushroom-cap.middle-cap {
  left: 90%;
  bottom: 33%;
}
.mushroom .mushroom-cap.last-cap {
  left: -23%;
  top: 15%;
  -webkit-transform: rotate(220deg);
          transform: rotate(220deg);
}
.mushroom .mushroom-cap .mushroom-stem {
  position: absolute;
  top: 36%;
  right: 92%;
  width: 1.4rem;
  height: 0.5rem;
  border-radius: 35%;
  background-color: #5c569b;
}

.naru-body {
  position: absolute;
  top: 22%;
  left: 22%;
  width: 18rem;
  height: 18rem;
  border-radius: 100px 200px 300px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  background-color: #291a12;
}

.naru-hair {
  position: absolute;
  top: 5%;
  width: 0;
  height: 0;
  border-left: 1.1rem solid transparent;
  border-right: 1.1rem solid transparent;
  border-bottom: 1.1rem solid #3b251a;
  -webkit-transform: rotate(10deg) skewX(-50deg);
          transform: rotate(10deg) skewX(-50deg);
  border-radius: 50px;
  -webkit-box-shadow: 12px 11px 20px #7cccf6;
          box-shadow: 12px 11px 20px #7cccf6;
  opacity: 0.9;
}
.naru-hair.spike-2 {
  left: 4%;
  top: 0%;
}
.naru-hair.spike-3 {
  left: 19%;
  top: -4%;
}
.naru-hair.spike-4 {
  left: -2%;
  top: 16%;
}
.naru-hair.left-spike-arm {
  left: -6%;
  top: 65%;
  -webkit-transform: rotate(110deg);
          transform: rotate(110deg);
  -webkit-box-shadow: 13px -17px 26px #7cccf6;
          box-shadow: 13px -17px 26px #7cccf6;
}
.naru-hair.left-spike-arm.spike-6 {
  left: -4%;
  top: 69%;
}
.naru-hair.spike-arm {
  left: 89%;
  top: 16%;
  -webkit-box-shadow: -1px 14px 25px #7cccf6;
          box-shadow: -1px 14px 25px #7cccf6;
  -webkit-transform: rotate(-11deg);
          transform: rotate(-11deg);
}

.naru-face {
  position: absolute;
  top: 5%;
  left: 8%;
  width: 5rem;
  height: 5rem;
  border-radius: 200px 50px;
  background-color: #d3f6ff;
  -webkit-filter: blur(1px);
          filter: blur(1px);
}
.naru-face.naru-face-copy {
  top: 10%;
  left: 15%;
  background-color: #64c3f5;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 25%;
  -webkit-filter: blur(10px);
          filter: blur(10px);
  opacity: 0.9;
}

.naru-face-glow {
  position: absolute;
  top: 21%;
  left: 28%;
  width: 2rem;
  height: 3rem;
  border-radius: 200px 50px;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
  background: radial-gradient(circle at center, #1dbde5, #291a12 100%);
  -webkit-filter: blur(14px);
          filter: blur(14px);
}

.naru-eye {
  position: absolute;
  top: 25%;
  left: 13%;
  width: 0.8rem;
  height: 0.45rem;
  border-radius: 100px/50px;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
  -webkit-filter: blur(1px);
          filter: blur(1px);
  background-color: #291a12;
}
.naru-eye.naru-right-eye {
  top: 10%;
  left: 27%;
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg);
}

.naru-eye-reflect {
  position: absolute;
  top: 60%;
  left: 60%;
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 50%;
  background-color: #dcf1fd;
  opacity: 0.8;
}
.naru-eye-reflect.naru-right-eye-reflect {
  top: 0%;
  left: 40%;
}

.naru-mouth {
  position: absolute;
  top: 19%;
  left: 22%;
  width: 1.3rem;
  height: 0.1rem;
  border: 3px solid;
  border-radius: 50%;
  -webkit-transform: rotate(310deg);
          transform: rotate(310deg);
  border-color: transparent transparent #291a12;
  -webkit-filter: blur(1px);
          filter: blur(1px);
}

.naru-belly {
  position: absolute;
  top: 38%;
  left: 35%;
  height: 8rem;
  width: 11rem;
  border-radius: 100px 0px;
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
  background: radial-gradient(circle at center, #1dbde5, #291a12 100%);
  -webkit-filter: blur(15px);
          filter: blur(15px);
}

.naru-shoulder-shadow {
  position: absolute;
  left: 20%;
  top: 34%;
  width: 8rem;
  height: 4rem;
  border-radius: 100px 40px;
  -webkit-transform: rotate(1230deg);
          transform: rotate(1230deg);
  background-color: #291a12;
  -webkit-filter: blur(6px);
          filter: blur(6px);
  z-index: 2;
}
.naru-shoulder-shadow.reflect-shoulder-shadow {
  -webkit-transform: rotate(240deg);
          transform: rotate(240deg);
  left: 53%;
  -webkit-filter: blur(15px);
          filter: blur(15px);
  background: -webkit-gradient(linear, left top, left bottom, from(#1dbde5), to(#060403));
  background: linear-gradient(#1dbde5, #060403);
  z-index: 0;
}

.naru-forearm {
  position: absolute;
  left: 18%;
  top: 45%;
  width: 9rem;
  height: 3.5rem;
  border-radius: 100px 40px;
  -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
  background: radial-gradient(#1f130d 50%, #935e41);
  z-index: 1;
}
.naru-forearm.right-forearm {
  top: 53%;
  -webkit-transform: rotate(-10deg) translateX(190px);
          transform: rotate(-10deg) translateX(190px);
}

.naru-finger {
  position: absolute;
  background-color: #422a1d;
  width: 2rem;
  height: 1.1rem;
  bottom: 50%;
  left: 38%;
  border-radius: 100px 40px;
  -webkit-transform: rotate(-20deg);
          transform: rotate(-20deg);
  z-index: 3;
}
.naru-finger.naru-right-finger {
  left: 50%;
  bottom: 46%;
  height: 0.7rem;
  width: 1.5rem;
  border-radius: 0px 10px;
  -webkit-transform: rotate(-35deg);
          transform: rotate(-35deg);
  background-color: #4db9f3;
  -webkit-filter: blur(1px);
          filter: blur(1px);
}

.naru-finger-line {
  position: absolute;
  background-color: #291a12;
  width: 1.2rem;
  height: 0.1rem;
  border: 1px solid;
  border-radius: 50%;
  bottom: 45%;
  left: 39%;
  -webkit-box-shadow: -5px 2px 6px #d3ae9a;
          box-shadow: -5px 2px 6px #d3ae9a;
  -webkit-transform: rotate(-20deg);
          transform: rotate(-20deg);
  border-color: transparent;
  z-index: 1;
  -webkit-filter: blur(1px);
          filter: blur(1px);
  opacity: 0.5;
}
.naru-finger-line.top-finger-line {
  bottom: 47%;
  left: 40%;
}
.naru-finger-line.naru-right-finger-line {
  bottom: 44%;
  left: 52%;
  width: 2rem;
}
.naru-finger-line.naru-top-right-finger-line {
  left: 52%;
  bottom: 48%;
  width: 2rem;
  -webkit-transform: rotate(-40deg);
          transform: rotate(-40deg);
}

.naru-elbow-highlight {
  position: absolute;
  left: 63%;
  bottom: 16%;
  width: 2.5rem;
  height: 4rem;
  -webkit-transform: rotate(80deg);
          transform: rotate(80deg);
  border-radius: 50%;
  -webkit-filter: blur(7px);
          filter: blur(7px);
  background: -webkit-gradient(linear, left top, right top, from(#1dbde5), to(#060403));
  background: linear-gradient(left, #1dbde5, #060403);
}

.naru-thigh {
  position: absolute;
  width: 6.2rem;
  height: 4.2rem;
  left: 55%;
  top: 60%;
  border-radius: 50% 30%;
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg);
  background: radial-gradient(ellipse, #291a12 50%, #1dbde5 150%);
  -webkit-filter: blur(2px);
          filter: blur(2px);
}
.naru-thigh.left-thigh {
  left: 24%;
  top: 59%;
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}

.naru-leg {
  position: absolute;
  top: 65%;
  left: 54%;
  width: 6.3rem;
  height: 6rem;
  -webkit-clip-path: polygon(71% 17%, 23% 17%, 27% 69%, 44% 95%, 63% 71%);
          clip-path: polygon(71% 17%, 23% 17%, 27% 69%, 44% 95%, 63% 71%);
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  background-color: #291a12;
}
.naru-leg.left-leg {
  left: 29%;
  -webkit-transform: rotate(-27deg);
          transform: rotate(-27deg);
}

.naru-foot {
  position: absolute;
  top: 75%;
  left: 59%;
  width: 2rem;
  height: 4rem;
  border-radius: 30px 30px 70px;
  background: -webkit-gradient(linear, left top, left bottom, from(#291a12), to(#935e41));
  background: linear-gradient(#291a12, #935e41);
  -webkit-filter: blur(1px);
          filter: blur(1px);
}
.naru-foot.left-foot {
  left: 35%;
  -webkit-transform: rotateY(170deg);
          transform: rotateY(170deg);
}

.naru-toe-line {
  position: absolute;
  top: 85%;
  left: 10%;
  width: 1rem;
  height: 0.1rem;
  border: 1px solid;
  border-radius: 50%;
  -webkit-transform: rotate(290deg);
          transform: rotate(290deg);
  border-color: transparent transparent #291a12;
}

.ori-container {
  position: relative;
  top: 38%;
  width: 18rem;
  height: 8rem;
  margin: 8% auto 0;
}

.ori-body {
  position: absolute;
  left: 30%;
  top: 30%;
  width: 6rem;
  height: 3.7rem;
  border-radius: 50%;
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
  background: -webkit-gradient(linear, left top, left bottom, from(#f4fbfe), to(#26abf0));
  background: linear-gradient(#f4fbfe, #26abf0);
}

.ori-arm {
  position: absolute;
  left: 45%;
  top: 25%;
  width: 1.5rem;
  height: 3rem;
  border-radius: 100px/70px;
  -webkit-transform: rotate(-40deg);
          transform: rotate(-40deg);
  -webkit-box-shadow: -1px 2px 3px #0e8acc;
          box-shadow: -1px 2px 3px #0e8acc;
  background: -webkit-gradient(linear, left top, left bottom, from(#f4fbfe), to(#64c3f5));
  background: linear-gradient(#f4fbfe, #64c3f5);
  -webkit-filter: blur(1px);
          filter: blur(1px);
}

.ori-ear {
  position: absolute;
  bottom: 80%;
  left: 60%;
  width: 1.3rem;
  height: 4rem;
  border-radius: 500px 10px 90px 500px;
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
  background: -webkit-gradient(linear, left top, left bottom, from(#f4fbfe), to(#94d5f8));
  background: linear-gradient(#f4fbfe, #94d5f8);
  -webkit-filter: blur(1px);
          filter: blur(1px);
}
.ori-ear.front-ear {
  bottom: 55%;
  left: 82%;
  -webkit-transform: rotate(201deg);
          transform: rotate(201deg);
}

.ori-head {
  position: absolute;
  left: 55%;
  width: 5rem;
  height: 4rem;
  border-radius: 50%;
  -webkit-transform: rotate(-20deg);
          transform: rotate(-20deg);
  background: radial-gradient(white, #acdff9 60%);
}

.ori-hair {
  position: absolute;
  left: 69%;
  bottom: 90%;
  width: 0.5rem;
  height: 3rem;
  border-radius: 50px 0px;
  -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
  background-color: #dcf1fd;
  -webkit-filter: blur(1px);
          filter: blur(1px);
}
.ori-hair.right-hair {
  bottom: 80%;
  left: 75%;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

.ori-eye {
  position: absolute;
  height: 0.6rem;
  top: 20%;
  left: 15%;
  border: 1px solid #095a84;
  -webkit-filter: blur(1px);
          filter: blur(1px);
}
.ori-eye.ori-right-eye {
  height: 0.8rem;
  left: 45%;
  top: 50%;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.ori-nose {
  position: absolute;
  top: 45%;
  left: 9%;
  width: 0.4rem;
  height: 0.8rem;
  border-radius: 100px/150px;
  -webkit-transform: rotate(140deg);
          transform: rotate(140deg);
  -webkit-filter: blur(1.5px);
          filter: blur(1.5px);
  background-color: #64c3f5;
}

.ori-tail {
  position: absolute;
  left: 6%;
  top: 30%;
  width: 4rem;
  height: 5rem;
  border-radius: 500px;
  border: 1rem solid;
  border-color: #c4e8fb transparent transparent;
  -webkit-filter: blur(1px);
          filter: blur(1px);
  z-index: 2;
}
.ori-tail .tail-tip {
  position: absolute;
  top: -3%;
  right: 85%;
  width: 1rem;
  height: 1.2rem;
  border-radius: 50%;
  background-color: #c4e8fb;
}
</style>
 </HEAD>

 <BODY>

<div class="stars-container">
  <div class="star star-1"></div>
  <div class="star star-2"></div>
  <div class="star star-3"></div>
  <div class="star star-4"></div>
  <div class="star star-5"></div>
  <div class="star star-6"></div>
  <div class="star star-7"></div>
  <div class="star star-8"></div>
  <div class="star star-9"></div>
  <div class="star star-10"></div>
</div>
<div class="naru-container">
  <div class="log">
    <div class="log-end"></div>
    <div class="log-end log-end-right"></div>
    <div class="moss-patch">
      <div class="main-moss"></div>
      <div class="main-moss moss-1"></div>
      <div class="main-moss moss-2"></div>
      <div class="main-moss moss-3"></div>
      <div class="main-moss moss-4"></div>
      <div class="main-moss moss-5"></div>
    </div>
    <div class="moss-patch second-patch">
      <div class="main-moss"></div>
      <div class="main-moss moss-1"></div>
      <div class="main-moss moss-2"></div>
      <div class="main-moss moss-3"></div>
      <div class="main-moss moss-4"></div>
      <div class="main-moss moss-5"></div>
    </div>
    <div class="mushroom">
      <div class="mushroom-cap">
        <div class="mushroom-stem"></div>
      </div>
      <div class="mushroom-cap middle-cap">
        <div class="mushroom-stem"></div>
      </div>
      <div class="mushroom-cap last-cap">
        <div class="mushroom-stem"></div>
      </div>
    </div>
  </div>
  <div class="naru-body">
    <div class="naru-hair"></div>
    <div class="naru-hair spike-2"></div>
    <div class="naru-hair spike-3"></div>
    <div class="naru-hair spike-4"></div>
    <div class="naru-hair spike-arm"></div>
    <div class="naru-hair left-spike-arm"></div>
    <div class="naru-hair left-spike-arm spike-6"></div>
    <div class="naru-face"></div>
    <div class="naru-face naru-face-copy"></div>
    <div class="naru-face-glow"></div>
    <div class="naru-eye">
      <div class="naru-eye-reflect"></div>
    </div>
    <div class="naru-eye naru-right-eye">
      <div class="naru-eye-reflect naru-right-eye-reflect"></div>
    </div>
    <div class="naru-mouth"></div>
  </div>
  <div class="naru-belly"></div>
  <div class="naru-shoulder-shadow"></div>
  <div class="naru-shoulder-shadow reflect-shoulder-shadow"></div>
  <div class="naru-forearm"></div>
  <div class="naru-finger-line top-finger-line"></div>
  <div class="naru-finger-line"></div>
  <div class="naru-finger"></div>
  <div class="naru-forearm right-forearm">
    <div class="naru-elbow-highlight"></div>
  </div>
  <div class="naru-finger naru-right-finger"></div>
  <div class="naru-finger-line naru-top-right-finger-line"></div>
  <div class="naru-finger-line naru-right-finger-line"></div>
  <div class="naru-thigh"></div>
  <div class="naru-leg"></div>
  <div class="naru-foot">
    <div class="naru-toe-line"></div>
  </div>
  <div class="naru-thigh left-thigh"></div>
  <div class="naru-leg left-leg"></div>
  <div class="naru-foot left-foot">
    <div class="naru-toe-line"></div>
  </div>
  <div class="ori-container">
    <div class="ori-body"></div>
    <div class="ori-arm"></div>
    <div class="ori-ear"></div>
    <div class="ori-head">
      <div class="ori-eye"></div>
      <div class="ori-eye ori-right-eye"></div>
      <div class="ori-nose"></div>
    </div>
    <div class="ori-ear front-ear"></div>
    <div class="ori-hair"></div>
    <div class="ori-hair right-hair"></div>
    <div class="ori-tail">
      <div class="tail-tip"></div>
    </div>
  </div>
</div>
 </BODY>
</HTML>


相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang2 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、5 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui