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

html--相爱的恐龙

2024-06-08 22:06:56 前端知识 前端哥 365 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基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

用html和css写一份个人介绍

2024-06-16 19:06:33

HTML语言导入echarts-wordcloud.js与echarts.js插件，数据为csv格式的云图

2024-06-16 15:06:59

小米商城

2024-06-16 15:06:28

探索VS-StreamJsonRPC：高效轻量级的JSON-RPC库

2024-06-16 09:06:51

35、Flink 的 Formats 之CSV 和 JSON Format

2024-06-16 09:06:45

JSON转日期，变为数字串

2024-06-16 09:06:45

使用axios读取本地json文件

2024-06-16 09:06:39

Grafana（二）Grafana 两种数据源图表展示（json-api与数据库）

2024-06-16 09:06:03

AJAX学习笔记（五、AJAX JSON与Servlet前后端交互）(1)

2024-06-16 09:06:46

【Qt之JSON文件】QJsonDocument、QJsonObject、QJsonArray等类介绍及使用

2024-06-16 09:06:45

大家推荐的文章
1

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
2

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
3

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
4

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
5

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
6

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
7

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
8

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
9

UE4.27支持HTML5

2024-05-07 13:05:261000
10

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000

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

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

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

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

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