div+css实现鼠标跟随一排观众人群站立举手动画效果代码

代码语言:html

所属分类:悬停

代码描述:div+css实现鼠标跟随一排观众人群站立举手动画效果代码

代码标签: div css 鼠标 跟随 一排 观众 人群 站立 举手 动画

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
html {
  font-size: 10px;
}
@media screen and (min-height: 350px) {
  html {
    font-size: 11px;
  }
}
@media screen and (min-height: 400px) {
  html {
    font-size: 12px;
  }
}
@media screen and (min-height: 500px) {
  html {
    font-size: 14px;
  }
}
@media screen and (max-width: 767px) {
  html {
    font-size: 10px;
  }
}
@media screen and (max-width: 450px) {
  html {
    font-size: 8px;
  }
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin: 0;
  background-color: #F5FCCD;
  overflow: hidden;
}

.stands {
  display: flex;
  justify-content: center;
  align-items: center;
}
.stands__text {
  position: absolute;
  top: 1rem;
  left: 1.6rem;
  width: 30rem;
  color: #80c0a1;
  font-size: 3rem;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
}
.stands__text:before, .stands__text:after {
  content: "Do the wave";
  position: absolute;
}
.stands__text:before {
  left: -0.3rem;
  color: #419197;
}
.stands__text:after {
  left: -0.6rem;
  color: #12486B;
}
.stands__items-wrapper {
  position: relative;
  top: 3rem;
  display: flex;
  flex-wrap: wrap;
  width: 105rem;
}
.stands__items-wrapper:before {
  content: "";
  position: absolute;
  top: -22rem;
  left: -50%;
  width: 200%;
  height: 20rem;
  background: linear-gradient(#FFF -200%, #78D6C6);
}
.stands__items-wrapper:after {
  content: "";
  position: absolute;
  bottom: -21.8rem;
  left: -50%;
  width: 200%;
  height: 20rem;
  background: linear-gradient(#000038 -200%, #80c0a1);
}
.stands__item {
  position: relative;
  width: 5rem;
  height: 5rem;
  padding: 0 0.1rem;
  list-style: none;
}
.stands__item:before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -1.8rem;
  left: 0;
  width: 100%;
  height: 5rem;
  background: linear-gradient(#78D6C6, #919ea3);
}
.stands__item:hover .stands__character, .stands__item:has(+ li:is(:hover, :focus-within)) .stands__character, .stands__item:is(:hover, :focus-within) + li .stands__character, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__character, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__character {
  top: -40%;
}
.stands__item:hover .stands__body, .stands__item:has(+ li:is(:hover, :focus-within)) .stands__body, .stands__item:is(:hover, :focus-within) + li .stands__body, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__body, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__body {
  height: 70%;
}
.stands__item:hover .stands__legs, .stands__item:has(+ li:is(:hover, :focus-within)) .stands__legs, .stands__item:is(:hover, :focus-within) + li .stands__legs, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__legs, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__legs {
  top: 80%;
}
.stands__item:hover .stands__leg, .stands__item:has(+ li:is(:hover, :focus-within)) .stands__leg, .stands__item:is(:hover, :focus-within) + li .stands__leg, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__leg, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__leg {
  top: 0;
  height: 4rem;
  border-radius: 0;
}
.stands__item:hover div.stands__mouth, .stands__item:has(+ li:is(:hover, :focus-within)) div.stands__mouth, .stands__item:is(:hover, :focus-within) + li div.stands__mouth, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) div.stands__mouth, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li div.stands__mouth {
  top: 75%;
  left: calc(50% - 0.15rem);
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 100%, #ff7d66 40%, #000038 40%, #000038);
  border: none;
}
.stands__item:hover .stands__arm {
  transform: scaleY(-1.2);
}
.stands__item:has(+ li:is(:hover, :focus-within)) .stands__arm, .stands__item:is(:hover, :focus-within) + li .stands__arm, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__arm, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__arm {
  transform: scaleY(-1);
}
.stands__item:has(+ li + li:is(:hover, :focus-within)) .stands__character, .stands__item:is(:hover, :focus-within) + li + li .stands__character, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__character, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__character, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__character, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__character, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__character, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__character {
  top: -20%;
}
.stands__item:has(+ li + li:is(:hover, :focus-within)) .stands__body, .stands__item:is(:hover, :focus-within) + li + li .stands__body, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__body, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__body, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__body, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__body, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__body, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__body {
  height: 75%;
}
.stands__item:has(+ li + li:is(:hover, :focus-within)) .stands__arm, .stands__item:is(:hover, :focus-within) + li + li .stands__arm, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__arm, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__arm, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__arm, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__arm, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__arm, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__arm {
  transform: scaleY(-0.6);
}
.stands__item:has(+ li + li:is(:hover, :focus-within)) .stands__legs, .stands__item:is(:hover, :focus-within) + li + li .stands__legs, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__legs, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__legs, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__legs, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__legs, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__legs, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__legs {
  top: 85%;
}
.stands__item:has(+ li + li:is(:hover, :focus-within)) .stands__leg, .stands__item:is(:hover, :focus-within) + li + li .stands__leg, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__leg, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__leg, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__leg, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__leg, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__leg, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__leg {
  top: 0;
  height: 3rem;
  border-radius: 0;
}
.stands__item:has(+ li + li + li:is(:hover, :focus-within)) .stands__character, .stands__item:is(:hover, :focus-within) + li + li + li .stands__character, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__character, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__character, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__character, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__character, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__character, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__character, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__character, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__character {
  top: -10%;
}
.stands__item:has(+ li + li + li:is(:hover, :focus-within)) .stands__body, .stands__item:is(:hover, :focus-within) + li + li + li .stands__body, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__body, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__body, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__body, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__body, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__body, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__body, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__body, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__body {
  height: 70%;
}
.stands__item:has(+ li + li + li:is(:hover, :focus-within)) .stands__arm, .stands__item:is(:hover, :focus-within) + li + li + li .stands__arm, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__arm, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__arm, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__arm, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__arm, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__arm, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__arm, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__arm, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__arm {
  transform: scaleY(0.6);
}
.stands__item:has(+ li + li + li:is(:hover, :focus-within)) .stands__legs, .stands__item:is(:hover, :focus-within) + li + li + li .stands__legs, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__legs, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__legs, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__legs, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__legs, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__legs, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__legs, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__legs, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__legs {
  top: 75%;
}
.stands__item:has(+ li + li + li:is(:hover, :focus-within)) .stands__leg, .stands__item:is(:hover, :focus-within) + li + li + li .stands__leg, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__leg, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__leg, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__leg, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__leg, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__leg, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__leg, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__leg, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__leg {
  top: 0;
  height: 3rem;
  border-radius: 0;
}
.stands__item:has(+ li:is(:hover, :focus-within)) .stands__body, .stands__item:has(+ li + li:is(:hover, :focus-within)) .stands__body, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__body, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__body {
  transform: skewX(-5deg);
}
.stands__item:is(:hover, :focus-within) + li .stands__body, .stands__item:is(:hover, :focus-within) + li + li .stands__body, .stands__item:has(+ li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li:is(:hover, :focus-within)) .stands__body, .stands__item:is(:hover, :focus-within) + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li .stands__body {
  transform: skewX(5deg);
}
.stands__item:nth-child(8n+2) .stands__body {
  background: linear-gradient(#80c0a1, #000038 300%);
}
.stands__item:nth-child(8n+2) .stands__body:before {
  display: none;
}
.stands__item:nth-child(8n+2) .stands__arm {
  background: linear-gradient(#80c0a1, #000038 200%);
}
.stands__item:nth-child(6n+2) .stands__body {
  background: linear-gradient(orange, #000038 300%);
}
.stands__item:nth-child(6n+2) .stands__body:before {
  display: none;
}
.stands__item:nth-child(6n+2) .stands__arm {
  background: linear-gradient(orange, #000038 200%);
}
.stands__item:nth-child(13n+6) .stands__body {
  background: linear-gradient(#419197, #000038 300%);
}
.stands__item:nth-child(13n+6) .stands__body:before {
  display: none;
}
.stands__item:nth-child(13n+6) .stands__arm {
  background: linear-gradient(#419197, #000038 200%);
}
.stands__item:nth-child(12n) .stands__body {
  background: linear-gradient(#FFF, #000038 300%);
}
.stands__item:nth-child(12n) .stands__body:before {
  display: none;
}
.stands__item:nth-child(12n) .stands__arm {
  background: linear-gradient(#FFF, #000038 200%);
}
.stands__item:nth-child(14n) .stands__body {
  background: linear-gradient(#eb80b1, #000038 300%);
}
.stands__item:nth-child(14n) .stands__body:before {
  display: none;
}
.stands__item:nth-child(14n) .stands__arm {
  background: linear-gradient(#eb80b1, #000038 200%);
}
.stands__item:nth-child(4n) .stands__legs {
  background-color: #919ea3;
}
.stands__item:nth-child(4n) .stands__leg {
  background: linear-gradient(#FFF -400%, #919ea3);
}
.stands__item:nth-child(4n+2) .stands__legs {
  background-color: #66777F;
}
.stands__item:nth-child(4n+2) .stands__leg {
  background: linear-gradient(#FFF -400%, #66777F);
}
.stands__item:nth-child(4n+3) .stands__legs {
  background-color: #419197;
}
.stands__item:nth-child(4n+3) .stands__leg {
  background: linear-gradient(#FFF -400%, #419197);
}
.stands__item:nth-child(3n) .stands__leg:after {
  background: linear-gradient(#FFF -400%, #000038);
}
.stands__item:nth-child(6n) .stands__hair {
  left: 25%;
  width: 50%;
  height: 30%;
  background: linear-gradient(#FFF -400%, #ff7d66);
}
.stands__item:nth-child(6n) .stands__face:after {
  width: 80%;
  height: 40%;
  background: linear-gradient(#FFF -400%, #ff7d66);
}
.stands__item:nth-child(6n+1) .stands__hair {
  left: 25%;
  width: 50%;
  height: 30%;
  background: linear-gradient(#FFF -400%, #000038);
}
.stands__item:nth-child(6n+1) .stands__face:after {
  width: 100%;
  height: 20%;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(#FFF -400%, #000038);
}
.stands__item:nth-child(6n+2) .stands__hair {
  top: -25%;
  left: 25%;
  width: 50%;
  height: 30%;
  background: linear-gradient(#FFF -400%, #66777F);
}
.stands__item:nth-child(6n+2) .stands__face:after {
  display: none;
}
.stands__item:nth-child(6n+4) .stands__hair {
  left: 25%;
  width: 50%;
  height: 30%;
  background: linear-gradient(#FFF -400%, orange);
}
.stands__item:nth-child(6n+4) .stands__face:after {
  border-radius: 50%;
  background: linear-gradient(#FFF -400%, orange);
}
.stands__item:nth-child(6n+5) .stands__hair {
  display: none;
}
.stands__item:nth-child(6n+5) .stands__face:after {
  display: none;
}
.stands__item:nth-child(8n) .stands__face {
  background: radial-gradient(#F5FCCD -100%, #ff7d66 200%);
}
.stands__item:nth-child(8n) .stands__face:before {
  background: linear-gradient(90deg, #F5FCCD -50%, #ffa899, #F5FCCD 150%);
}
.stands__item:nth-child(3n) .stands__eyes:before, .stands__item:nth-child(3n) .stands__eyes:after {
  background: radial-gradient(circle at 0 0, #FFF -200%, #12486B);
}
.stands__item:nth-child(7n) .stands__eyes:before, .stands__item:nth-child(7n) .stands__eyes:after {
  background-color: #419197;
}
.stands__item:nth-child(3n) .stands__nose {
  left: calc(50% - 0.15rem);
  width: 0.3rem;
}
.stands__item:nth-child(4n) .stands__mouth {
  width: 30%;
}
.stands__item:nth-child(4n+2) .stands__mouth {
  width: 20%;
  left: 40%;
}
.stands__chair {
  width: 100%;
  height: 100%;
  background-color: #12486B;
  border-radius: 1rem;
  box-shadow: 0 -0.5rem 2rem 0 rgba(0, 0, 56, 0.8);
}
.stands__chair:before {
  content: "";
  position: absolute;
  top: 10%;
  left: 5%;
  width: 90%;
  height: 80%;
  border-radius: 1rem;
  border-bottom: 2px solid #419197;
  background: linear-gradient(transparent, #000038 200%);
}
.stands__character {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: top 0.3s ease;
}
.stands__body {
  position: absolute;
  top: 15%;
  left: 20%;
  width: 60%;
  height: 55%;
  border-radius: 1.25rem 1.25rem 0 0;
  background: linear-gradient(#ff7d66, #000038 300%);
  transition-property: height, transform;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.stands__body:before {
  content: "";
  position: absolute;
  top: 1.2rem;
  right: 0.6rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #FFF;
}
.stands__arm {
  position: absolute;
  top: 15%;
  width: 30%;
  height: 3rem;
  background: linear-gradient(#ff7d66, #000038 200%);
  transform-origin: 50% 0.5rem;
  transition: transform 0.3s ease;
}
.stands__arm:nth-child(1) {
  left: -20%;
  border-radius: 1rem 0 0 0;
}
.stands__arm:nth-child(2) {
  right: -20%;
  border-radius: 0 1rem 0 0;
}
.stands__arm:after {
  content: "";
  position: absolute;
  bottom: -1rem;
  width: 100%;
  height: 1rem;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(#F5FCCD, #ff7d66 200%);
}
.stands__legs {
  position: absolute;
  top: 70%;
  left: 20%;
  width: 60%;
  height: 20%;
  border-radius: 0 0 1rem 1rem;
  background-color: #12486B;
  transition: top 0.3s ease;
}
.stands__leg {
  position: absolute;
  top: -30%;
  width: 45%;
  height: 3rem;
  background: linear-gradient(#FFF -400%, #12486B);
  border-radius: 1rem 1rem 0 0;
  transition-property: height, border-radius;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.stands__leg:nth-child(1) {
  left: 0;
}
.stands__leg:nth-child(2) {
  right: 0;
}
.stands__leg:after {
  content: "";
  position: absolute;
  bottom: -20%;
  width: 100%;
  height: 1rem;
  border-radius: 40% 40% 10% 10%;
  background: linear-gradient(#ff7d66, #000038 300%);
}
.stands__hair {
  position: absolute;
  top: -35%;
  left: 20%;
  width: 60%;
  height: 40%;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(#FFF -400%, #000038);
}
.stands__face {
  position: absolute;
  top: -30%;
  left: 27.5%;
  width: 45%;
  height: 50%;
  border-radius: 45% 45% 50% 50%;
  background: radial-gradient(circle at center, #F5FCCD, #ff7d66 200%);
}
.stands__face:before {
  content: "";
  position: absolute;
  bottom: -0.4rem;
  left: 25%;
  width: 50%;
  height: 0.5rem;
  border-radius: 0 0 1rem 1rem;
  background: linear-gradient(90deg, #ff7d66 -50%, #F5FCCD, #ff7d66 150%);
}
.stands__face:after {
  content: "";
  position: absolute;
  top: -5%;
  left: 0;
  width: 100%;
  height: 30%;
  border-radius: 50% 50% 0 50%;
  background: linear-gradient(#FFF -400%, #000038);
}
.stands__eyes {
  position: absolute;
  top: 35%;
  left: 20%;
  display: flex;
  justify-content: space-between;
  width: 60%;
  height: 20%;
}
.stands__eyes:before, .stands__eyes:after {
  content: "";
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: radial-gradient(circle at 0 0, #FFF -200%, #000038);
}
.stands__nose {
  position: absolute;
  top: 40%;
  left: calc(50% - 0.25rem);
  justify-content: center;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0 0 50% 50%;
  border-bottom: 2px solid #ff7d66;
  border-right: 1px solid #ff7d66;
}
.stands__mouth {
  position: absolute;
  top: 60%;
  left: 30%;
  justify-content: center;
  width: 40%;
  height: 0.5rem;
  border-radius: 50%;
  border-bottom: 1px solid #000038;
  transition-property: left, width;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
</style>



  
  
</head>

<body>
  <div class="stands">
  <ul class="stands__items-wrapper">
    <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
    <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
    <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
    <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
    <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
    <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
    <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
    <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
    <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
    <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
    <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
    <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
    <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
    <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
    <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
    <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
    <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mouth"></div>
        </div>
      </div>
    </li>
     <li class="stands__item">
      <div class="stands__chair"></div>
      <div class="stands__character">
        <div class="stands__body">
          <div class="stands__arm"></div>
          <div class="stands__arm"></div>
        </div>
        <div class="stands__legs">
          <div class="stands__leg"></div>
          <div class="stands__leg"></div>
        </div>
        <div class="stands__hair"></div>
        <div class="stands__face">
          <div class="stands__eyes"></div>
          <div class="stands__nose"></div>
          <div class="stands__mo.........完整代码请登录后点击上方下载按钮下载查看

网友评论0