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

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

代码语言：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%;
.........完整代码请登录后点击上方下载按钮下载查看