Html
    Css
    Js

    
                        
.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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css科技感 二维码

更新时间:2021-01-11 00:58:01

0