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

代码语言：html
所属分类：悬停
代码描述：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-gradie.........完整代码请登录后点击上方下载按钮下载查看