菜单 搜索
首页 前端知识 html--相爱的恐龙

html--相爱的恐龙

2024-06-08 22:06:56 前端知识 前端哥 381 827 我要收藏 
<!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: #FDF3F3;
  color: #A5CABE;
  font-family: 'Pacifico', cursive;
}

.box{
  position: relative;
	margin: auto;
	display: block;
	//margin-top: -10%;
	width: 600px;
	height: 600px;
	background: #FDF3F3;
}

.platform{
  position: absolute;
	bottom: 7%;
	left: 1.7%;
	width: 97%;
	height: 15%;
	background: #B5DED1;
	border-radius: 50%;
}

.dinosaur-boy{
  position: absolute;
  margin: auto;
	display: block;
	margin-top: 30%;
	width: 50%;
	height: 61%;
	background: none;
}

.body{
  position: absolute;
  top: 40%;
  left: 10%;
	width: 80%;
	height: 43%;
	background: #92BA65;
  border-radius: 50%;
}

.neck{
  position: absolute;
  top: -83%;
  left: -8%;
	width: 26%;
	height: 120%;
	background: #92BA65;
  border-radius: 25%;
}

.neck-part-1{
  position: absolute;
  top: 72%;
  left: 10%;
	width: 68%;
	height: 60%;
	background: #92BA65;
  border-radius: 50%;
  -ms-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}

.head{
  position: absolute;
  top: -10%;
  left: 6%;
	width: 140%;
	height: 37%;
	background: #92BA65;
  border-radius: 50%;
}

.head-spot-1{
  position: absolute;
  top: 33%;
  left: 29%;
	width: 22%;
	height: 16%;
	background: #719745;
  border-radius: 50%;
}

.head-spot-2{
  position: absolute;
  top: 16.5%;
  left: 20%;
	width: 13%;
	height: 11%;
	background: #719745;
  border-radius: 50%;
}

.head-spot-3{
  position: absolute;
  top: 11%;
  left: 50%;
	width: 17.5%;
	height: 16.5%;
	background: #719745;
  border-radius: 50%;
}

.mouth{
  position: absolute;
  top: 61%;
  left: 60%;
	width: 29%;
	height: 22%;
	background: #6e6436;
  border-radius: 50%;
  -ms-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
}

.mouth-copy{
  position: absolute;
  top: -10%;
  left: 0%;
	width: 100%;
	height: 100%;
	background: #92BA65;
  border-radius: 50%;
}

.cheek{
  position: absolute;
  top: 50%;
  left: 55%;
	width: 17.7%;
	height: 22.2%;
	background: #E7646A;
  border-radius: 50%;
}

.eye{
  position: absolute;
  top: 28%;
  left: 75%;
	width: 15.5%;
	height: 22%;
	background: #6e6436;
  border-radius: 50%;
}

.eye-copy{
  position: absolute;
  top: -10%;
  left: -5%;
	width: 110%;
	height: 100%;
	background: #92BA65;
  border-radius: 50%;
}

.neck-part-2{
  position: absolute;
  top: 24.1%;
  left: 67.5%;
	width: 106%;
	height: 58%;
	background: #FDF3F3;
  border-radius: 50%;
}

.copy-body{
  position: absolute;
  top: 40%;
  left: 10%;
	width: 80%;
	height: 43%;
	background: #92BA65;
  border-radius: 50%;
}

.tail{
  position: absolute;
  top: 14%;
  left: 90%;
	width: 15%;
	height: 30%;
	background: #719745;
  border-radius: 50%;
  -ms-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}

.tail-part-1{
  position: absolute;
  top: -20%;
  left: 20%;
	width: 82%;
	height: 90%;
	background: #719745;
  border-radius: 50%;
}

.tail-part-2{
  position: absolute;
  top: -40%;
  left: 50%;
	width: 45%;
	height: 75%;
	background: #719745;
  border-radius: 50%;
}

.hind-leg{
  position: absolute;
  top: 82%;
  left: 66%;
	width: 15%;
	height: 35%;
	background: #92BA65;
  -ms-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
  transform: rotate(7deg);
}

.hind-leg-copy{
  position: absolute;
  top: 72%;
  left: 55%;
  width: 15%;
	height: 35%;
  background: #719745;
  -ms-transform: rotate(9deg);
  -webkit-transform: rotate(9deg);
  transform: rotate(9deg);
}

.hind-foot{
  position: absolute;
  top: 82%;
  left: -39%;
	width: 172%;
	height: 68%;
	background: #92BA65;
  border-radius: 50px;
  -ms-transform: rotate(-7deg);
  -webkit-transform: rotate(-7deg);
  transform: rotate(-7deg);
}

.hind-foot-copy{
  position: absolute;
  top: 87%;
  left: -39%;
	width: 172%;
	height: 63%;
	background: #719745;
  border-radius: 50px;
  -ms-transform: rotate(-7deg);
  -webkit-transform: rotate(-7deg);
  transform: rotate(-7deg);
}

.front-leg{
  position: absolute;
  top: 78%;
  left: 20%;
	width: 15%;
	height: 35%;
	background: #92BA65;
  -ms-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
  transform: rotate(7deg);
}

.front-leg-copy{
  position: absolute;
  top: 68%;
  left: 9%;
	width: 15%;
	height: 35%;
	background: #719745;
  -ms-transform: rotate(9deg);
  -webkit-transform: rotate(9deg);
  transform: rotate(9deg);
}

.front-foot{
  position: absolute;
  top: 84%;
  left: -39%;
	width: 172%;
	height: 65%;
	background: #92BA65;
  border-radius: 50px;
  -ms-transform: rotate(-7deg);
  -webkit-transform: rotate(-7deg);
  transform: rotate(-7deg);
}

.front-foot-copy{
  position: absolute;
  top: 89%;
  left: -39%;
	width: 172%;
	height: 60%;
	background: #719745;
  border-radius: 50px;
  -ms-transform: rotate(-7deg);
  -webkit-transform: rotate(-7deg);
  transform: rotate(-7deg);
}

.toes{
  position: absolute;
  top: 33%;
  left: 1%;
	width: 21%;
	height: 70%;
	background: #ECEAE5;
  border-radius: 50%;
  -ms-transform: rotate(-35deg);
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}

.shadow-1{
  position: absolute;
  top: 25%;
  left: 5%;
	width: 35%;
	height: 62%;
	background: #719745;
  border-radius: 50%;
  -ms-transform: rotate(-35deg);
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}

.shadow-1-copy{
  position: absolute;
  top: -15%;
  left: 5%;
	width: 100%;
	height: 130%;
	background: #92BA65;
  border-radius: 50%;
}

.shadow-2{
  position: absolute;
  top: 6%;
  left: 27%;
	width: 67%;
	height: 86%;
	background: #719745;
  border-radius: 50%;
}

.shadow-2-copy{
  position: absolute;
  top: -3%;
  left: -14%;
	width: 115%;
	height: 100%;
	background: #92BA65;
  border-radius: 50%;
}

.heart{
  position: absolute;
  top: 20%;
  left: 8%;
	width: 6%;
	height: 16%;
	background: #E7646A;
  border-radius: 50px;
  -ms-transform: rotate(-35deg);
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}

.heart-copy{
  position: absolute;
  top: 20%;
  left: 50%;
	width: 100%;
	height: 100%;
	background: #E7646A;
  border-radius: 50px;
  -ms-transform: rotate(75deg);
  -webkit-transform: rotate(75deg);
  transform: rotate(75deg);
}

.spot-1{
  position: absolute;
  top: 12.5%;
  left: 29%;
	width: 16%;
	height: 17.5%;
	background: #719745;
  border-radius: 50%;
}

.spot-2{
  position: absolute;
  top: 37.5%;
  left: 58%;
	width: 11.5%;
	height: 11.25%;
	background: #719745;
  border-radius: 50%;
}

.spot-3{
  position: absolute;
  top: 12.5%;
  left: 62.5%;
	width: 20%;
	height: 20%;
	background: #719745;
  border-radius: 50%;
}

.spot-4{
  position: absolute;
  top: 25%;
  left: 50%;
	width: 9%;
	height: 8.75%;
	background: #719745;
  border-radius: 50%;
}

.spot-5{
  position: absolute;
  top: 7.5%;
  left: 46%;
	width: 12.5%;
	height: 10%;
	background: #719745;
  border-radius: 50%;
}

.dinosaur-girl{
  position: absolute;
  margin: auto;
	display: block;
	margin-top: 30%;
  margin-left: 50%;
	width: 50%;
	height: 61%;
	background: none;
}

.girl-body{
  position: absolute;
  top: 40%;
  right: 10%;
	width: 80%;
	height: 43%;
	background: #F7B5B5;
  border-radius: 50%;
}

.girl-neck{
  position: absolute;
  top: -83%;
  right: -8%;
	width: 26%;
	height: 120%;
	background: #F7B5B5;
  border-radius: 25%;
}

.girl-neck-part-1{
  position: absolute;
  top: 72%;
  right: 10%;
	width: 68%;
	height: 60%;
	background: #F7B5B5;
  border-radius: 50%;
  -ms-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
}

.girl-head{
  position: absolute;
  top: -10%;
  right: 6%;
	width: 140%;
	height: 37%;
	background: #F7B5B5;
  border-radius: 50%;
}

.girl-head-spot-1{
  position: absolute;
  top: 33%;
  right: 29%;
	width: 22%;
	height: 16%;
	background: #F39090;
  border-radius: 50%;
}

.girl-head-spot-2{
  position: absolute;
  top: 16.5%;
  right: 20%;
	width: 13%;
	height: 11%;
	background: #F39090;
  border-radius: 50%;
}

.girl-head-spot-3{
  position: absolute;
  top: 11%;
  right: 50%;
	width: 17.5%;
	height: 16.5%;
	background: #F39090;
  border-radius: 50%;
}

.girl-mouth{
  position: absolute;
  top: 61%;
  right: 60%;
	width: 29%;
	height: 22%;
	background: #6e6436;
  border-radius: 50%;
  -ms-transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
  transform: rotate(-25deg);
}

.girl-mouth-copy{
  position: absolute;
  top: -10%;
  right: 0%;
	width: 100%;
	height: 100%;
	background: #F7B5B5;
  border-radius: 50%;
}

.girl-cheek{
  position: absolute;
  top: 50%;
  right: 55%;
	width: 17.7%;
	height: 22.2%;
	background: #E7646A;
  border-radius: 50%;
}

.girl-eye{
  position: absolute;
  top: 28%;
  right: 75%;
	width: 15.5%;
	height: 22%;
	background: #6e6436;
  border-radius: 50%;
}

.girl-eye-copy{
  position: absolute;
  top: -10%;
  right: -5%;
	width: 110%;
	height: 100%;
	background: #F7B5B5;
  border-radius: 50%;
}

.girl-neck-part-2{
  position: absolute;
  top: 24.1%;
  right: 67.5%;
	width: 106%;
	height: 58%;
	background: #FDF3F3;
  border-radius: 50%;
}

.girl-copy-body{
  position: absolute;
  top: 40%;
  right: 10%;
	width: 80%;
	height: 43%;
	background: #F7B5B5;
  border-radius: 50%;
}

.girl-tail{
  position: absolute;
  top: 14%;
  right: 90%;
	width: 15%;
	height: 30%;
	background: #F39090;
  border-radius: 50%;
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}

.girl-tail-part-1{
  position: absolute;
  top: -20%;
  right: 20%;
	width: 82%;
	height: 90%;
	background: #F39090;
  border-radius: 50%;
}

.girl-tail-part-2{
  position: absolute;
  top: -40%;
  right: 50%;
	width: 45%;
	height: 75%;
	background: #F39090;
  border-radius: 50%;
}

.girl-hind-leg{
  position: absolute;
  top: 82%;
  right: 66%;
	width: 15%;
	height: 35%;
	background: #F7B5B5;
  -ms-transform: rotate(-7deg);
  -webkit-transform: rotate(-7deg);
  transform: rotate(-7deg);
}

.girl-hind-leg-copy{
  position: absolute;
  top: 72%;
  right: 55%;
  width: 15%;
	height: 35%;
  background: #F39090;
  -ms-transform: rotate(-9deg);
  -webkit-transform: rotate(-9deg);
  transform: rotate(-9deg);
}

.girl-hind-foot{
  position: absolute;
  top: 82%;
  right: -39%;
	width: 172%;
	height: 68%;
	background: #F7B5B5;
  border-radius: 50px;
  -ms-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
  transform: rotate(7deg);
}

.girl-hind-foot-copy{
  position: absolute;
  top: 87%;
  right: -39%;
	width: 172%;
	height: 63%;
	background: #F39090;
  border-radius: 50px;
  -ms-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
  transform: rotate(7deg);
}

.girl-front-leg{
  position: absolute;
  top: 78%;
  right: 20%;
	width: 15%;
	height: 35%;
	background: #F7B5B5;
  -ms-transform: rotate(-7deg);
  -webkit-transform: rotate(-7deg);
  transform: rotate(-7deg);
}

.girl-front-leg-copy{
  position: absolute;
  top: 68%;
  right: 9%;
	width: 15%;
	height: 35%;
	background: #F39090;
  -ms-transform: rotate(-9deg);
  -webkit-transform: rotate(-9deg);
  transform: rotate(-9deg);
}

.girl-front-foot{
  position: absolute;
  top: 84%;
  right: -39%;
	width: 172%;
	height: 65%;
	background: #F7B5B5;
  border-radius: 50px;
  -ms-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
  transform: rotate(7deg);
}

.girl-front-foot-copy{
  position: absolute;
  top: 89%;
  right: -39%;
	width: 172%;
	height: 60%;
	background: #F39090;
  border-radius: 50px;
  -ms-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
  transform: rotate(7deg);
}

.girl-toes{
  position: absolute;
  top: 33%;
  right: 1%;
	width: 21%;
	height: 70%;
	background: #ECEAE5;
  border-radius: 50%;
  -ms-transform: rotate(35deg);
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}

.girl-shadow-1{
  position: absolute;
  top: 25%;
  right: 5%;
	width: 35%;
	height: 62%;
	background: #F39090;
  border-radius: 50%;
  -ms-transform: rotate(35deg);
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}

.girl-shadow-1-copy{
  position: absolute;
  top: -15%;
  right: 5%;
	width: 100%;
	height: 130%;
	background: #F7B5B5;
  border-radius: 50%;
}

.girl-shadow-2{
  position: absolute;
  top: 6%;
  right: 27%;
	width: 67%;
	height: 86%;
	background: #F39090;
  border-radius: 50%;
}

.girl-shadow-2-copy{
  position: absolute;
  top: -3%;
  right: -14%;
	width: 115%;
	height: 100%;
	background: #F7B5B5;
  border-radius: 50%;
}

.girl-heart{
  position: absolute;
  top: 20%;
  right: 8%;
	width: 6%;
	height: 16%;
	background: #E7646A;
  border-radius: 50px;
  -ms-transform: rotate(35deg);
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}

.girl-heart-copy{
  position: absolute;
  top: 20%;
  right: 50%;
	width: 100%;
	height: 100%;
	background: #E7646A;
  border-radius: 50px;
  -ms-transform: rotate(-75deg);
  -webkit-transform: rotate(-75deg);
  transform: rotate(-75deg);
}

.girl-spot-1{
  position: absolute;
  top: 12.5%;
  right: 29%;
	width: 16%;
	height: 17.5%;
	background: #F39090;
  border-radius: 50%;
}

.girl-spot-2{
  position: absolute;
  top: 37.5%;
  right: 58%;
	width: 11.5%;
	height: 11.25%;
	background: #F39090;
  border-radius: 50%;
}

.girl-spot-3{
  position: absolute;
  top: 12.5%;
  right: 62.5%;
	width: 20%;
	height: 20%;
	background: #F39090;
  border-radius: 50%;
}

.girl-spot-4{
  position: absolute;
  top: 25%;
  right: 50%;
	width: 9%;
	height: 8.75%;
	background: #F39090;
  border-radius: 50%;
}

.girl-spot-5{
  position: absolute;
  top: 7.5%;
  right: 46%;
	width: 12.5%;
	height: 10%;
	background: #F39090;
  border-radius: 50%;
}

.big-heart{
  position: absolute;
  top: 37%;
  left: 41%;
	width: 9%;
	height: 14%;
	background: #F07D7E;
  border-radius: 50px 50px 0px 0px;
  -ms-transform: rotate(-55deg);
  -webkit-transform: rotate(-55deg);
  transform: rotate(-55deg);
  animation: heart 5s infinite;
}

.big-heart-copy{
  position: absolute;
  top: 37%;
  left: 41%;
	width: 100%;
	height: 100%;
	background: #F07D7E;
  border-radius: 50px 50px 0px 0px;
  -ms-transform: rotate(107deg);
  -webkit-transform: rotate(107deg);
  transform: rotate(107deg);
}

.big-heart-copy-1{
  position: absolute;
  top: 57%;
  left: 0%;
	width: 60%;
	height: 50%;
	background: #F07D7E;
  -ms-transform: rotate(4deg);
  -webkit-transform: rotate(4deg);
  transform: rotate(4deg);
}

@keyframes heart{
  0%{
    
  }
  50%{
  width: 11%;
	height: 16%;
  }
  100%{
    
  }
}

.little-heart{
  position: absolute;
  top: 44.4%;
  left: 47%;
	width: 2%;
	height: 3%;
	background: #F07D7E;
  border-radius: 50px 50px 0px 0px;
  -ms-transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
  animation: little-heart 3s infinite;  
}

.little-heart-copy{
  position: absolute;
  top: 42%;
  left: 46%;
	width: 100%;
	height: 100%;
	background: #F07D7E;
  border-radius: 50px 50px 0px 0px;
  -ms-transform: rotate(110deg);
  -webkit-transform: rotate(110deg);
  transform: rotate(110deg);
}

.little-heart-1{
  position: absolute;
  top: 44.4%;
  left: 47%;
	width: 2%;
	height: 3%;
	background: #F07D7E;
  border-radius: 50px 50px 0px 0px;
  -ms-transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
  animation: little-heart-1 4s infinite;  
}

.little-heart-copy-1{
  position: absolute;
  top: 42%;
  left: 46%;
	width: 100%;
	height: 100%;
	background: #F07D7E;
  border-radius: 50px 50px 0px 0px;
  -ms-transform: rotate(110deg);
  -webkit-transform: rotate(110deg);
  transform: rotate(110deg);
}

.little-heart-2{
  position: absolute;
  top: 44.4%;
  left: 47%;
	width: 2%;
	height: 3%;
	background: #F07D7E;
  border-radius: 50px 50px 0px 0px;
  -ms-transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
  animation: little-heart-2 3s infinite;  
}

.little-heart-copy-2{
  position: absolute;
  top: 42%;
  left: 46%;
	width: 100%;
	height: 100%;
	background: #F07D7E;
  border-radius: 50px 50px 0px 0px;
  -ms-transform: rotate(110deg);
  -webkit-transform: rotate(110deg);
  transform: rotate(110deg);
}

.little-heart-3{
  position: absolute;
  top: 44.4%;
  left: 47%;
	width: 2%;
	height: 3%;
	background: #F07D7E;
  border-radius: 50px 50px 0px 0px;
  -ms-transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
  animation: little-heart-3 4s infinite;  
}

.little-heart-copy-3{
  position: absolute;
  top: 42%;
  left: 46%;
	width: 100%;
	height: 100%;
	background: #F07D7E;
  border-radius: 50px 50px 0px 0px;
  -ms-transform: rotate(110deg);
  -webkit-transform: rotate(110deg);
  transform: rotate(110deg);
}

.little-heart-4{
  position: absolute;
  top: 44.4%;
  left: 47%;
	width: 2%;
	height: 3%;
	background: #F07D7E;
  border-radius: 50px 50px 0px 0px;
  -ms-transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
  animation: little-heart-4 3s infinite;  
}

.little-heart-copy-4{
  position: absolute;
  top: 42%;
  left: 46%;
	width: 100%;
	height: 100%;
	background: #F07D7E;
  border-radius: 50px 50px 0px 0px;
  -ms-transform: rotate(110deg);
  -webkit-transform: rotate(110deg);
  transform: rotate(110deg);
}


@keyframes little-heart{
  0%{
  
  }
  100%{
  width: 0%;
	height: 0%;
  top: 0%;
  left: 0%;
  }
}

@keyframes little-heart-1{
  0%{
  
  }
  100%{
  width: 0%;
	height: 0%;
  top: 0%;
  left: 25%;
  }
}

@keyframes little-heart-2{
  0%{
  
  }
  100%{
  width: 0%;
	height: 0%;
  top: 0%;
  left: 50%;
  }
}

@keyframes little-heart-3{
  0%{
  
  }
  100%{
  width: 0%;
	height: 0%;
  top: 0%;
  left: 75%;
  }
}

@keyframes little-heart-4{
  0%{
  
  }
  100%{
  width: 0%;
	height: 0%;
  top: 0%;
  left: 100%;
  }
}

.title-box{
  position: relative;
	margin: 0 auto;
	display: block;
	margin-top: 0%;
	background: none;
  text-align: center;
  z-index: 100;
  
}
  </style>
 </HEAD>

 <BODY>
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<!--.title-box<h1>Pure CSS. <br>"Dinosaurs in love"</h1>
-->
<div class="box">
  <div class="platform"></div>
  <div class="dinosaur-boy">
    <div class="body">
      <div class="neck">
        <div class="neck-part-1"></div>
        <div class="head">
          <div class="head-spot-1"></div>
          <div class="head-spot-2"></div>
          <div class="head-spot-3"></div>
          <div class="mouth">
            <div class="mouth-copy"></div>
          </div>
          <div class="cheek"></div>
          <div class="eye">
            <div class="eye-copy"></div>
          </div>
        </div>
        <div class="neck-part-2"></div>
      </div>
      <div class="tail">
        <div class="tail-part-1"></div>
        <div class="tail-part-2"></div>
      </div>
      <div class="front-leg-copy">
        <div class="front-foot-copy">
          <div class="toes"></div>
        </div>
      </div>
      <div class="front-leg">
        <div class="front-foot">
          <div class="toes"></div>
        </div>
      </div>
      <div class="hind-leg-copy">
        <div class="hind-foot-copy">
          <div class="toes"></div>
        </div>
      </div>
      <div class="hind-leg">
        <div class="hind-foot">
          <div class="toes"></div>
        </div>
      </div>
    </div>
    <div class="copy-body">
      <div class="shadow-1">
        <div class="shadow-1-copy"></div>
      </div>
      <div class="shadow-2">
        <div class="shadow-2-copy"></div>
      </div>
      <div class="heart">
        <div class="heart-copy"></div>
      </div>
      <div class="spot-1"></div>
      <div class="spot-2"></div>
      <div class="spot-3"></div>
      <div class="spot-4"></div>
      <div class="spot-5"></div>
    </div>
  </div>
  <div class="dinosaur-girl">
    <div class="girl-body">
      <div class="girl-neck">
        <div class="girl-neck-part-1"></div>
        <div class="girl-head">
          <div class="girl-head-spot-1"></div>
          <div class="girl-head-spot-2"></div>
          <div class="girl-head-spot-3"></div>
          <div class="girl-mouth">
            <div class="girl-mouth-copy"></div>
          </div>
          <div class="girl-cheek"></div>
          <div class="girl-eye">
            <div class="girl-eye-copy"></div>
          </div>
        </div>
        <div class="girl-neck-part-2"></div>
      </div>
      <div class="girl-tail">
        <div class="girl-tail-part-1"></div>
        <div class="girl-tail-part-2"></div>
      </div>
      <div class="girl-front-leg-copy">
        <div class="girl-front-foot-copy">
          <div class="girl-toes"></div>
        </div>
      </div>
      <div class="girl-front-leg">
        <div class="girl-front-foot">
          <div class="girl-toes"></div>
        </div>
      </div>
      <div class="girl-hind-leg-copy">
        <div class="girl-hind-foot-copy">
          <div class="girl-toes"></div>
        </div>
      </div>
      <div class="girl-hind-leg">
        <div class="girl-hind-foot">
          <div class="girl-toes"></div>
        </div>
      </div>
    </div>
    <div class="girl-copy-body">
      <div class="girl-shadow-1">
        <div class="girl-shadow-1-copy"></div>
      </div>
      <div class="girl-shadow-2">
        <div class="girl-shadow-2-copy"></div>
      </div>
      <div class="girl-heart">
        <div class="girl-heart-copy"></div>
      </div>
      <div class="girl-spot-1"></div>
      <div class="girl-spot-2"></div>
      <div class="girl-spot-3"></div>
      <div class="girl-spot-4"></div>
      <div class="girl-spot-5"></div>
    </div>
  </div>
  <div class="big-heart">
    <div class="big-heart-copy"></div>
    <div class="big-heart-copy-1"></div>
  </div>
  <div class="little-heart">
    <div class="little-heart-copy"></div>
  </div>
  <div class="little-heart-1">
    <div class="little-heart-copy-1"></div>
  </div>
  <div class="little-heart-2">
    <div class="little-heart-copy-2"></div>
  </div>
  <div class="little-heart-3">
    <div class="little-heart-copy-3"></div>
  </div>
  <div class="little-heart-4">
    <div class="little-heart-copy-4"></div>
  </div>
</div>
  <script>
  
  </script>
 </BODY>
</HTML>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

转载请注明出处或者链接地址：https://www.qianduange.cn//article/11579.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！