WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Effet de la carte
1457
ledoc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
26 May 2025
Un code par mironovbogdan341
8 January 2025
Carte 3D
3 March 2025
Cylindres Grille Fond 3D
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); } };