.wrap {
width:100vw;
height:100vh;
background:#000;
}
.ewm {
width:100px;
height:100px;
top:32%;
display:flex;
flex-wrap:wrap;
position:absolute;
left:50%;
transform:translate(-50%,-50%);
transition:all 0.8s 0s;
}
.ewm .div1 {
width:35%;
height:35%;
box-sizing:border-box;
border-top:6px solid #ffd601;
border-left:6px solid #ffd601;
transition:all 0.8s 0.1s;
}
.ewm .div3 {
width:35%;
height:35%;
box-sizing:border-box;
border-top:6px solid #ffd601;
border-right:6px solid #ffd601;
transition:all 0.8s 0.1s;
}
.ewm .div5 {
width:35%;
height:35%;
box-sizing:border-box;
border-bottom:6px solid #ffd601;
border-left:6px solid #ffd601;
transition:all 0.8s 0.1s;
}
.ewm .div7 {
width:35%;
height:35%;
box-sizing:border-box;
border-bottom:6px solid #ffd601;
border-right:6px solid #ffd601;
transition:all 0.8s 0.1s;
}
.ewm .div4 {
width:100%;
height:30%;
transition:all 0.8s 0.1s;
}
.ewm .div2 {
width:30%;
height:35%;
transition:all 0.8s 0.1s;
}
.ewm .div6 {
width:30%;
height:35%;
transition:all 0.8s 0.1s;
}
.ewm .div8 {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:100%;
height:6px;
background:#ffd601;
transition:all 0.8s 0.1s;
}
.h2_tips {
position:absolute;
top:30px;
width:80px;
right:30px;
transform:translateX(0%);
opacity:1;
transition:all 0.8s 0.5s;
}
.quan1 {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) skew(30deg,20deg);
width:140%;
height:140%;
opacity:1;
transition:all 0.8s 0.2s;
}
.quan_con1 {
width:100%;
height:100%;
border:1px solid rgba(255,214,1,0.4);
border-radius:100%;
box-sizing:border-box;
-webkit-animation:zhuan 4s linear 0s infinite;
}
.quan_con1:after {
position:absolute;
content:"";
width:5px;
height:5px;
background:#ffd601;
border-radius:100%;
left:-2px;
top:50%;
margin-top:-2px;
}
.quan2 {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) skew(-30deg,-20deg);
width:140%;
height:140%;
opacity:1;
transition:all 0.8s 0.2s;
}
.quan_con2 {
width:100%;
height:100%;
border:1px solid rgba(255,214,1,0.4);
border-radius:100%;
box-sizing:border-box;
-webkit-animation:zhuan 4s linear 0s infinite;
}
.quan_con2:after {
position:absolute;
content:"";
width:5px;
height:5px;
background:#ffd601;
border-radius:100%;
right:-2px;
top:50%;
margin-top:-2px;
}
更新时间:2021-01-11 00:58:01