WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Tarjeta animada de redes sociales.
4157
Andev.web
Abrir en el editor
Publica tu código
Recomendado
29 July 2024
juego de serpiente
22 April 2025
Un código de hanyhelmy119
13 March 2025
Un código de lebdev
HTML
Copy
Andev Web
Instagram
Followers:
33K
Follow me
GitHub
Followers:
330
Follow me
Linkedin
Followers:
550
Follow me
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"); *, *::after, *::before { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Poppins", sans-serif; min-height: 100vh; background-color: #060606; display: grid; place-items: center; color: white; } #cards { width: 70%; padding-inline: 20px; display: flex; flex-wrap: wrap; gap: 30px; } .card { min-width: 200px; height: 350px; flex: 1 1 250px; background-color: rgba(255, 255, 255, 0.12); border-radius: 12px; position: relative; } #cards:hover > .card { background: radial-gradient( 400px circle at var(--mouse-x) var(--mouse-y), hsl(var(--color) / 1), rgba(255, 255, 255, 0.12) 40% ); } .card-content { position: absolute; inset: 1px; background-color: #131315; border-radius: inherit; } .card:nth-child(1) { --color: 348 80% 60%; } .card:nth-child(2) { --color: 0 0% 100%; } .card:nth-child(3) { --color: 220 100% 35%; } .card::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: radial-gradient( 500px circle at var(--mouse-x) var(--mouse-y), hsl(var(--color) / 0.35), transparent 40% ); border-radius: inherit; opacity: 0; z-index: 2; } #cards:hover > .card::before { opacity: 1; } a { all: unset; cursor: pointer; } .card-content { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 18px; align-items: center; } .card-content > i { font-size: 10rem; color: rgba(255, 255, 255, 0.5); } .card-content > p { color: rgba(255, 255, 255, 0.5); } .card-content > a { width: 90%; padding-block: 0.8rem; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; display: flex; justify-content: center; align-items: center; gap: 8px; z-index: 10; } .card-content > a:hover { background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); }
JS
Copy
const cards = Array.from(document.querySelectorAll(".card")); const cardsContainer = document.querySelector("#cards"); cardsContainer.addEventListener("mousemove", (e) => { for (const card of cards) { const rect = card.getBoundingClientRect(); x = e.clientX - rect.left; y = e.clientY - rect.top; card.style.setProperty("--mouse-x", `${x}px`); card.style.setProperty("--mouse-y", `${y}px`); } });