- Get link
- X
- Other Apps
Source Code:
1) Index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Scroll Animation Down Arrow</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h3>Scroll Down</h3>
<div class="box">
<span></span>
<span></span>
</div>
</body>
</html>
2) Style.css
/* CSS Document */
body{
background: #000; margin:0; padding: 0;
}
h3{
color:#FFF;
text-align: center;
font-family: OCR A;
animation:text 5s infinite;
}
@keyframes text{
0%{text-shadow:0 -50px 5px #09F;}
100%{text-shadow:-0 50px 5px #FF9;}
}
.box{
position: absolute;
top:50%;
left:50%;
tarnsform:translate(-50%,-50%);
}
.box span{
display: block;
width:10px;
height:10px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
animation: anim 5s infinite;
}
.box span:nth-child(1)
{
animation-dealy:-0.2s;
transform:rotate(45deg)translate(-20px,-20px);
}
.box span:nth-child(2)
{
animation-dealy:-0.4s;
}
@keyframes anim{
0%{
opacity:0;
transform:rotate(180deg)translate(-5px,-5px);
}
50%{
opacity: 1;
transform:rotate(45deg)translate(-5px,-5px);
}
100%{
opacity:0;
transform:rotate(45deg)translate(5px,5px);
}
}
Comments
Post a Comment
If you any Query and get more information please comment it. Thanks for visit our blog.