css实现可爱小老虎坐着效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现可爱小老虎坐着效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  background: #F3EDDE;
  color: #5D440A;
  font-family: "Pacifico", cursive;
  font-size: 14px;
}

.box {
  width: 352px;
  height: 360px;
}

.title-box {
  text-align: center;
  z-index: 100;
}

.platform {
  width: 135%;
  height: 36%;
  left: -18%;
  top: 73%;
  background: #463308;
}

.tail {
  width: 19%;
  height: 27%;
  left: 9%;
  top: 44%;
  background: radial-gradient(closest-corner at 20% 73%, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 97%, #FFB91A 99%, #FFB91A 99%);
}

.tail::after {
  width: 128%;
  height: 53.5%;
  left: -42%;
  top: -7%;
  background: radial-gradient(closest-corner at 23% 60%, #AB3A09, #AB3A09 97%, #FFB91A 99%, #FFB91A 99%);
}

.tail-stripe {
  width: 9%;
  height: 9.5%;
  left: 15%;
  top: 43.5%;
  background: radial-gradient(closest-corner at 30% 50%, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 96%, #AB3A09 99%, #AB3A09 99%);
}

.tail-stripe::before {
  left: 40%;
  top: 80%;
  background: radial-gradient(closest-corner at 30% 50%, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 96%, #AB3A09 99%, #AB3A09 99%);
  transform: rotate(50deg);
}

.body {
  width: 59%;
  height: 47%;
  left: 20.5%;
  top: 48%;
  background: #FA8C00;
}

.left-foot, .right-foot, .left-hand, .right-hand, .left-ear, .right-ear {
  left: 0%;
  top: 0%;
}

.foot {
  width: 20%;
  height: 33%;
  left: 7%;
  top: 67%;
  transform: rotate(-30deg);
  background: radial-gradient(farthest-side at 45% 0%, #FEF2F5, #FEF2F5 86%, #FFC8D0 99%, #FFC8D0 99%);
}

.foot::after {
  width: 52%;
  height: 48%;
  left: 22%;
  top: 40%;
  transform: rotate(-5deg);
  background: radial-gradient(farthest-side at 80% 0%, #FFAAB6, #FFAAB6 79%, #F88A9E 99%, #F88A9E 99%);
}

.toe {
  width: 13%;
  height: 14.5%;
  left: -2%;
  top: 75%;
  animation: toe 5s infinite;
}

.toe::before {
  left: 20%;
  top: -60%;
}

.toe::after {
  left: 95%;
  top: -75%;
}

.toe-pink {
  width: 5.5%;
  height: 8%;
  left: 13%;
  top: 69%;
  background: radial-gradient(farthest-side at 80% 0%, #FFAAB6, #FFAAB6 79%, #F88A9E 99%, #F88A9E 99%);
  animation: toe 5s infinite;
}

.toe-pink::before {
  left: -170%;
  top: 30%;
  background: radial-gradient(farthest-side at 80% 0%, #FFAAB6, #FFAAB6 79%, #F88A9E 99%, #F88A9E 99%);
  transform: rotate(-25deg);
}

.toe-pink::after {
  left: -220%;
  top: 150%;
  background: radial-gradient(farthest-side at 80% 0%, #FFAAB6, #FFAAB6 79%, #F88A9E 99%, #F88A9E 99%);
  transform: rotate(-40deg);
}

.hand {
  width: 24.5%;
  height: 45%;
  left: 23.5%;
  top: 53%;
  transform: rotate(10deg);
}

.hand-stripe {
  width: 10.5%;
  height: 10.5%;
  left: 24%;
  top: 65.5%;
  background: radial-gradient(closest-corner at 30% 50%, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 96%, #AB3A09 99%, #AB3A09 99%);
  transform: rotate(120deg);
}

.hand-stripe::before {
  width: 90%;
  height: 90%;
  left: -50%;
  top: 17%;
  background: radial-gradient(closest-corner at 30% 50%, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 96%, #AB3A09 99%, #AB3A09 99%);
}

.hand-stripe::after {
  width: 50%;
  height: 50%;
  left: 95%;
  top: 25%;
  background: radial-gradient(closest-corner at 30% 50%, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 96%, #AB3A09 99%, #AB3A09 99%);
}

.belly {
  width: 17.5%;
  height: 36.5%;
  left: 40%;
  top: 59%;
  background: radial-gradient(farthest-side at 60% 0%, #FEF2F5, #FEF2F5 76%, #FFC8D0 99%, #FFC8D0 99%);
}

.hand::after {
  width: 95%;
  height: 29%;
  left: 12%;
  top: 75%;
  transform: rotate(-10deg);
}

.finger {
  width: 11%;
  height: 11%;
  left: 36%;
  top: 89%;
  background: radial-gradient(farthest-side at 60% 0%, #FEF2F5, #FEF2F5 76%, #FFC8D0 99%, #FFC8D0 99%);
  animation: toe 5s infinite;
}

.finger::before {
  width: 105%;
  height: 100%;
  left: -65%;
  top: 5%;
  background: radial-gradient(farthest-side at 60% 0%, #FEF2F5, #FEF2F5 76%, #FFC8D0 99%, #FFC8D0 99%);
}

.finger::after {
  width: 105%;
  height: 100%;
  left: -130%;
  top: 15%;
  background: radial-gradient(farthest-side at 60% 0%, #FEF2F5, #FEF2F5 76%, #FFC8D0 99%, #FFC8D0 99%);
}

.ear {
  width: 26%;
  height: 26.5%;
  left: 13%;
  top: 3%;
}

.ear::after {
  width: 37%;
  height: 70.5%;
  left: 15%;
  top: 20%;
  background: radial-gradient(farthest-side at 0% 70%, #FFAAB6, #FFAAB6 79%, #F88A9E 99%, #F88A9E 99%);
  transform: rotate(-20deg);
}

.ear-hair-shadow {
  width: 8.5%;
  height: 4%;
  left: 18%;
  top: 15%;
}

.ear-hair {
  width: 7.5%;
  height: 3%;
  left: 20%;
  top: 15%;
}

.ear-hair-shadow::before, .ear-hair::before {
  width: 80%;
  height: 80%;
  left: 20%;
  top: 80%;
}

.ear-hair-shadow::after, .ear-hair::after {
  width: 50%;
  height: 50%;
  left: 25%;
  top: 160%;
}

.ear-stripe {
  width: 8%;
  height: 6%;
  left: 25%;
  top: 3.5%;
  background: radial-gradient(closest-corner at 30% 50%, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 96%, #AB3A09 99%, #AB3A09 99%);
  transform: rotate(-5deg);
}

.ear-stripe::before {
  left: -65%;
  top: -12%;
  background: radial-gradient(closest-corner at 30% 50%, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 96%, #AB3A09 99%, #AB3A09 99%);
  transform: rotate(-10deg);
}

.ear-stripe::after {
  width: 60%;
  height: 60%;
  left: -90%;
  top: 10%;
  background: radial-gradient(closest-corner at 30% 50%, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 96%, #AB3A09 99%, #AB3A09 99%);
  transform: rotate(-20deg);
}

.head {
  width: 53%;
  height: 48%;
  left: 23%;
  top: 2%;
}

.head::after {
  width: 80%;
  height: 49.5%;
  left: 10%;
  top: 65%;
}

.snout {
  width: 20%;
  height: 18.5%;
  left: 40%;
  top: 43%;
}

.snout::before {
  width: 77%;
  height: 61%;
  left: 36%;
  top: 12%;
  transform: rotate(50deg);
}

.snout::after {
  width: 77%;
  height: 61%;
  left: -16%;
  top: 12%;
  transform: rotate(-50deg);
}

.mouth {
  width: 13.5%;
  height: 16.5%;
  left: 43%;
  top: 43%;
  background: #631B03;
}

.mouth::before {
  width: 40%;
  height: 15%;
  left: 21%;
  top: 82.5%;
  background: #E61371;
  transform: rotate(5deg);
}

.mouth::after {
  width: 40%;
  height: 15%;
  left: 45%;
  top: 78%;
  background: #E61371;
  transform: rotate(-35deg);
}

.cheek {
  width: 9.5%;
  height: 8.5%;
  left: 41%;
  top: 45%;
}

.cheek::after {
  width: 100%;
  height: 100%;
  left: 85%;
  top: 0%;
}

.nose {
  width: 9%;
  height: 6.5%;
  left: 45.5%;
  top: 42%;
  background: radial-gradient(farthest-side at 50% 10%, #FEF2F5, #FEF2F5 19%, #FFAAB6 79%, #FFAAB6 79%, #F88A9E 99%, #F88A9E 99%);
}

.left-eye {
  width: 11%;
  height: 15.5%;
  left: 32%;
  top: 28%;
  background: #FA8C00;
  transform: rotate(-15deg);
}

.left-eye::before, .right-eye::before {
  width: 85%;
  height: 85%;
  left: 7%;
  top: 10%;
}

.left-eye::after, .right-eye::after {
  width: 65%;
  height: 65%;
  left: 18%;
  top: 30%;
  background: #0099C0;
  animation: eye 5s infinite;
}

.right-eye {
  width: 11%;
  height: 15.5%;
  left: 55%;
  top: 27%;
  background: #FA8C00;
  transform: rotate(15deg);
}

.left-pupil {
  width: 4%;
  height: 6%;
  left: 36.1%;
  top: 35%;
  background: #011D21;
  transform: rotate(-15deg);
}

.right-pupil {
  width: 4%;
  height: 6%;
  left: 57.9%;
  top: 34%;
  background: #011D21;
  transform.........完整代码请登录后点击上方下载按钮下载查看