WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Efeito de carta
1319
ledoc
Abrir no Editor
Publique Seu Código
Recomendado
10 February 2025
aplicativo de clima
29 July 2024
23 August 2025
Página de login HTML: Tema Matrix com autenticação por impressão digital
HTML
Copy
Card Hover Effect
CSS
Copy
*, *::after, *::before { padding: 0; margin: 0; box-sizing: border-box; } body { overflow: hidden; height: 100vh; background: #061727; } img { max-width: 100%; } main { display: grid; place-items: center; height: 100%; } #wand { width: 100px; aspect-ratio: 1 / 10; background: linear-gradient( to right, rgb(26 44 28) 10%, rgb(42 40 44) 45% 55%, rgb(26 24 28) 90% ); overflow: hidden; border-radius: 3vmin; box-shadow: 0vmin 1vmin 4vmin rgb(0 0 0 / 80%); position: absolute; left: 50%; top: 5%; translate: -50%; z-index: 100; } .cap { height: 20%; background: linear-gradient( to right, rgb(212 221 236) 10%, rgb(255 255 255) 45% 55%, rgb(212 221 236) 90% ); } .gallery { display: flex; justify-content: center; align-items: center; gap: 1rem; } .tile { aspect-ratio: 1; height: 400px; width: 400px; background: #1b2734; border-radius: 15%; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; box-shadow: 0px 10px 20px -13px rgba(222, 222, 222, 0.75) inset; -webkit-box-shadow: 0px 10px 20px -13px rgba(222, 222, 222, 0.75) inset; -moz-box-shadow: 0px 10px 20px -13px rgba(222, 222, 222, 0.75) inset; } .tile-image { position: absolute; z-index: 2; aspect-ratio: 1; object-fit: cover; object-position: center; } .tile > .tile-image { opacity: var(--opacity); filter: blur(calc(var(--blur) * 10px)); }
JS
Copy
const wand = document.getElementById("wand"); window.onmousemove = (e) => { const mouseX = e.clientX; const mouseY = e.clientY; const wandX = window.innerWidth * -0.15 + mouseX * 1.3; const wandY = window.innerHeight * 0.1 + mouseY * 0.4; const mouseXAsDecimal = mouseX / window.innerWidth; wand.animate( { left: `${wandX}px`, top: `${wandY}px`, rotate: `${-10 + 20 * mouseXAsDecimal}deg`, }, { duration: 400, fill: "forwards", } ); const tiles = document.getElementsByClassName("tile"); for (const tile of tiles) { const dimensions = tile.getBoundingClientRect(); const relativeWandX = wandX - dimensions.left, relativeWandXAsDecimal = relativeWandX / dimensions.width; const opacity = relativeWandXAsDecimal, blur = 1 - relativeWandXAsDecimal; tile.style.setProperty("--opacity", opacity); tile.style.setProperty("--blur", blur); } };