Scroll Down Animation code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Scroll Down Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="center"> <div class="arrow"></div> </div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; background: blue; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0; height: 160px; border-left: 6px dashed rgba(255,255,255,0.1); } .arrow { position: absolute; top: 0; left: -6px; height: 40px; width: 6px; background: white; animation: animate 2s infinite; } .arrow::before { content: ''; position: absolute; bottom: 0; left: -10px; width: 20px; height: 20px; border-bottom: 6px solid white; border-right: 6px solid white; transform: rotate(45deg); } @keyframes animate { 0% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(80px); opacity: 1; } 100% { transform: translateY(160px); opacity: 0; } }
