.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