[238992] home page style(arrow) [238992] home page style(arrow)211 Conversations | 2,773 Posts + (501 from users, 2,272 from bots) | 4 Uploaded Images +
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>