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="down"></div> </div> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: black; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .down { position: […]
Sliding Button code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sliding Button</title> <link rel="stylesheet" href="style.css"> </head> <body> <a href="#" data-title="Button">Button</a> </body> </html> 2.style.css: body { margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; } a { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-decoration: none; text-transform: uppercase; font-size: […]
Text Color Animation code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Text Color Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="center"> <h1>Visual Code</h1> </div> </body> </html> 2.style.css: body { margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; } .center { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; } […]
Pencil Shape code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Pencil Shape</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="center"> <div class="pencil"> <p>Visual Code</p> </div> </div> </body> </html> 2.style.css: body { margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); […]
Custom Preloader Animation code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Preloader</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="center"> <span></span> <span></span> <span></span> <span></span> </div> </body> </html> 2.style.css: body { margin: 0; padding: 0; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } span { position: absolute; width: […]
Loading Animation code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Loading Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html> 2.style.css: body { margin: 0; padding: 0; } ul { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; } ul […]
Button Hover Effects code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Button Hover Effects</title> <link rel="stylesheet" href="style.css"> </head> <body> <a href="#">Button</a> </body> </html> 2.style.css: body { margin: 0; padding: 0; } a { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 180px; height: 60px; color: white; background: black; text-align: […]
Button Hover Effect code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Button Hover Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul> <li><a href="#">Prev</a></li> <li><a href="#">Next</a></li> </ul> </body> </html> 2.style.css: body body { margin: 0; padding: 0; } ul { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; margin: 0; […]
Animated Tennis Ball code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Animated Tennis Ball</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="center"> <div class="ball"></div> <div class="shadow"></div> </div> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: yellowgreen; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .ball […]
Flex Box Hover Effect code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flex Box Hover Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="box">Box One</div> <div class="box">Box Two</div> <div class="box">Box Three</div> <div class="box">Box Four</div> <div class="box">Box Five</div> <div class="box">Box Six</div> <div class="box">Box Seven</div> <div class="box">Box Eight</div> </div> </body> </html> […]