[238992] home page style(arrow)

211 Conversations | 2,773 Posts + (501 from users, 2,272 from bots) | 4 Uploaded Images +

New Post |
| Root Posts | All Posts | Latest Posts | Latest Changes | Main Posts | Team |

By Kritishankar02. Created 2020/11/21 09:18:23, modified 2020/11/21 11:37:38

Post type: HTML

Show as HTML page | Reply | Duplicate | Rename | History | Raw Text

<!doctype html>
<html>
	<head>
		<style>
			body{
	
	margin:0;
	
}

.box{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}

.box span{
	display: inline-block;
	width: 20px;
	height: 20px;
	border-bottom: 1px solid blue;
	border-right: 1px solid blue;
	transform: 	rotate(180deg);
	margin:-13px;
	animation: animate 2s infinite;
}

.box span:nth-child(2){
	animation-delay: -0.2s;
	
}

.box span:nth-child(3){
	animation-delay: -0.4s;
	
}


@keyframes animate{
	
	0%{
		opacity:0;
		transform: rotate(180deg) translate(-20px,-20px);
	}
	
	50%{
		opacity:1;
	}
	100%{
		opacity:2;
		transform: rotate(180deg) translate(20px,20px);
		}
	}
	
@keyframes animate1{
	
	0%{
		opacity:0;
		transform: rotate(-45deg) translate(-20px,-20px);
	}
	
	50%{
		opacity:1;
	}
	100%{
		opacity:2;
		transform: rotate(-45deg) translate(20px,20px);
		}
	}
@keyframes animate2{
	
	0%{
		opacity:0;
		transform: rotate(90deg) translate(-20px,-20px);
	}
	
	50%{
		opacity:1;
	}
	100%{
		opacity:2;
		transform: rotate(90deg) translate(20px,20px);
		}
	}

@keyframes animate3{
	
	0%{
		opacity:0;
		transform: rotate(180deg) translate(-20px,-20px);
	}
	
	50%{
		opacity:1;
	}
	100%{
		opacity:2;
		transform: rotate(180deg) translate(20px,20px);
		}
	}

@keyframes animate4{
	
	0%{
		opacity:0;
		transform: rotate(270deg) translate(-20px,-20px);
	}
	
	50%{
		opacity:1;
	}
	100%{
		opacity:2;
		transform: rotate(270deg) translate(20px,20px);
		}
	}


	
		</style>
	</head>
	<body>
	<p>Click on the arrows to see the animation</p>
		<div class="box">
			<span></span>
			<span></span>
			<span></span>
		</div>
	</body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script> 
$(document).ready(function(){
  $(".box").click(function(){
	var p = $( ".box" ).first();
		var position = p.position();
		console.log(position.top);
		if (position.left >= 400 && position.left <= 500){
			$('.box span').css({"animation-name": "animate1" });
			
			$(".box").animate({left: '250px' , top:'100px',display: 'block'});
			
		}
		else if (position.left >= 200 && position.left <= 300){
			$('.box span').css({"animation-name": "animate2" });
			
			$(".box").animate({left: '900px' , top:'100px',display: 'block'});
		}
		else if(position.left >= 850 && position.left <= 950){
			$('.box span').css({"animation-name": "animate3" });
			
			$(".box").animate({left: '700px' , top:'500px',display: 'block'});
		}
		else if(position.left >= 600 && position.left <= 800){
			$('.box span').css({"animation-name": "animate4" });
			
			$(".box").animate({left: '100px' , top:'500px',display: 'block'});
		}
		else{
			$('.box span').css({"animation-name": "animate" });
			
			$(".box").animate({left: '50%' , top:'50%',display: 'block'});
		}
    
		
  });
});
</script> 	
</html>