<!DOCTYPE html>
laser
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="" content="">
<title>laser</title>
<style type="text/css" media="all">
*{
margin: 0;
padding: 0;
}
.main{
height: 300px;
width: 280px;
position: absolute;
left: 10%;
top: 20%;
transform: translate(-50% ,-50%);
transform-style: preserve-3d;
transform: rotateX(60deg);
}
span{
position: absolute;
border: 10px solid transparent;
animation: try 6s linear infinite;
}
span:nth-child(1){
left: 0px;
top: 30px;
bottom: 30px;
right: 0px;
animation-delay: 1s;
}
span:nth-child(2){
left: 20px;
top: 40px;
bottom: 40px;
right: 20px;
animation-delay: .9s;
}
span:nth-child(3){
left: 30px;
top: 50px;
bottom: 50px;
right: 30px;
animation-delay: .8s;
}span:nth-child(4){
left: 40px;
top: 60px;
bottom: 60px;
right: 40px;
animation-delay: .7s;
}span:nth-child(5){
left: 50px;
top: 70px;
bottom: 70px;
right: 50px;
animation-delay: .6s;
}span:nth-child(6){
left: 80px;
top: 80px;
bottom: 80px;
right: 80px;
animation-delay: .5s;
}
span:nth-child(7){
left: 90px;
top: 90px;
bottom: 90px;
right: 90px;
animation-delay: .4s;
}
span:nth-child(8){
left: 100px;
top: 100px;
bottom: 100px;
right: 100px;
animation-delay: .3s;
}
span:nth-child(9){
left: 115px;
top: 115px;
bottom: 115px;
right: 115px;
animation-delay: .2s;
}span:nth-child(10){
left: 130px;
top: 130px;
bottom: 130px;
right: 130px;
animation-delay: .1s;
}
}span:nth-child(12){
left: 130px;
top: 150px;
bottom: 150px;
right: 130px;
animation-delay: 0.1s;
}
}span:nth-child(11){
left: 140px;
top: 140px;
bottom: 140px;
right: 140px;
animation-delay: 0s;
}
@keyframes try{
0%{
transform: rotateY(360deg);
border-top-color: aqua;
border-bottom-color: red;
}
50%{
transform: rotate(0deg);
border-top-color: #1e3888;
border-bottom-color: #d58607;
}
100%{
transform: rotateX(360deg);
border-top-color: #f4f209;
border-bottom-color: #b6085e;
}
}
</style>
</head>
<body>
<div class=main>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
Comments
Post a Comment