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>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0