WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
icono de redes sociales con el cursor
2329
Andev.web
Abrir en el editor
Video
Publica tu código
4
Recomendado
14 June 2025
Un código de Metehan
25 November 2025
Invasores del espacio
27 June 2025
Ejemplo de página web de portafolio
HTML
Copy
Andev Web
CSS
Copy
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background-color: #222221; display: flex; justify-content: center; align-items: center; } ul { display: flex; list-style: none; gap: 2.5rem; } .item a { text-decoration: none; width: 4.8rem; height: 4.8rem; background-color: #f0f9fe; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; border: 3px solid #f0f9fe; overflow: hidden; } .item a::before { content: ""; position: absolute; width: 100%; height: 100%; background: var(--bg-color); z-index: 0; scale: 1 0; transform-origin: bottom; transition: scale 0.5s ease; } .item:hover a::before { scale: 1 1; } .icon { font-size: 2rem; color: hsl(203, 92%, 8%); transition: 0.5s ease; z-index: 2; } .item a:hover .icon { color: #fff; transform: rotateY(360deg); } .item:nth-child(1) { --bg-color: linear-gradient(to bottom right, #f9ce34, #ee2a7b, #6228d7); } .item:nth-child(2) { --bg-color: #0077b5; } .item:nth-child(3) { --bg-color: #ff0000; } .item:nth-child(4) { --bg-color: #000; }
JS
Copy