WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
2248
Andev.web
Abrir no Editor
Publique Seu Código
Recomendado
19 April 2025
Um Código de Metehan
21 July 2025
FORMULÁRIO DE LOGIN DE IDENTIFICAÇÃO ÚNICA
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Andev Web</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <ul class="sci"> <li style="--clr: #ff0000;"><a href="#"><i class="fa-brands fa-youtube"></i></a></li> <li style="--clr: #333333;"><a href="#"><i class="fa-brands fa-x-twitter"></i></a></li> <li style="--clr: #00a783;"><a href="#"><i class="fa-brands fa-whatsapp"></i></a></li> </ul> <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.8.1/vanilla-tilt.min.js" integrity="sha512-wC/cunGGDjXSl9OHUH0RuqSyW4YNLlsPwhcLxwWW1CR4OeC2E1xpcdZz2DeQkEmums41laI+eGMw95IJ15SS3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="script.js"></script> </body> </html>
CSS
Copy
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; height: 100vh; transition: 0.5s; } .sci{ position: relative; display: flex; gap: 40px; } .sci li{ list-style: none; } .sci li a{ position: relative; display: flex; justify-content: center; align-items: center; width: 150px; height: 150px; background: #fff; color: #333; font-size: 4em; text-decoration: none; border-radius: 10px; transform-style: preserve-3d; transition: background 0.25s; box-shadow: 0 25px 35px rgba(0, 0, 0, 0.1); } .sci li a:hover{ background: var(--clr); box-shadow: 0 25px 35px rgba(0, 0, 0, 0.25); border: 5px solid var(--clr); } .sci li a i{ transition: 0.5s; pointer-events: none; } .sci li a:hover i{ transform: scale(1.5) translateZ(50px); color: #fff; }
JS
Copy
VanillaTilt.init(document.querySelectorAll(".sci li a"), { max: 30, speed: 400, glare: true }); let list = document.querySelectorAll('.sci li'); let bg = document.querySelector('body'); list.forEach(element => { element.addEventListener('mouseenter', function(event){ let color = event.target.style.getPropertyValue('--clr'); bg.style.backgroundColor = color; }) element.addEventListener('mouseleave', function(event){ bg.style.backgroundColor = '#fff'; }) })
