Loading Page Animation code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Loading Page Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loader"> <h2>Loading</h2> </div> </body> </html> 2.style.css: body { margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); position: absolute; […]
Arrow Sign Loading Animation code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Arrow Sign Loading Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="center"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html> 2.style.css: body { margin: 0; padding: 0; } .center { […]
Image Hover Effects code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Image Hover Effects</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="center"> <div class="box"> <div class="image"> <img src="image4.jpg"> </div> <div class="content"> <h1>Visual Code</h1> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti beatae nam qui earum ex, id dolorum ipsum! Soluta […]
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: […]