Smtp587

Smtp587
  • Форум
  • Search

Smtp587

  • Форум

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: […]

Scroll Down Animation

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: […]

Sliding Button

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%; } […]

Text Color Animation

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%); […]

Pencil Shape

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: […]

Custom Preloader Animation

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 […]

Loading Animation

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 Effects

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; […]

Button Hover Effect

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 […]

Animated Tennis 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> […]

Flex Box Hover Effect

Навигация по записям

  • Новые записи Новые записи
    • 1
    • 2
    • 3
    • 4
    • …
    • 16
  • Предыдущие записи Предыдущие записи

© 2022 Smtp587 – Все права защищены

Powered by  – Разработан в тема Customizr