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