WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Perfil de información
1794
Andev.web
Abrir en el editor
Publica tu código
Recomendado
28 May 2025
Formulario de inicio de sesión futurista
28 August 2025
Explorador de la Tierra: Ecología, geografía y biomas
9 December 2024
Efecto de animación de desplazamiento mediante HTML, CSS y Javascript
HTML
Copy
Andev Web
CSS
Copy
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #212121; font-family: 'Poppins', sans-serif; } /*Andev Web*/ .card { width: 280px; height: 280px; background: white; border-radius: 32px; padding: 3px; position: relative; box-shadow: #604b4a30 0px 70px 30px -50px; transition: all 0.5s ease-in-out; } .card .mail { position: absolute; right: 2rem; top: 1.4rem; background: transparent; border: none; } .card .mail svg { stroke: #fbb9b6; stroke-width: 3px; } .card .mail svg:hover { stroke: #f55d56; } .card .profile-pic { position: absolute; width: calc(100% - 6px); height: calc(100% - 6px); top: 3px; left: 3px; border-radius: 29px; z-index: 1; border: 0px solid #fbb9b6; overflow: hidden; transition: all 0.5s ease-in-out 0.2s, z-index 0.5s ease-in-out 0.2s; } .card .profile-pic img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; -o-object-position: 0px 0px; object-position: 0px 0px; transition: all 0.5s ease-in-out 0s; } .card .profile-pic svg { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 0px 0px; object-position: 0px 0px; transform-origin: 45% 20%; transition: all 0.5s ease-in-out 0s; } .card .bottom { position: absolute; bottom: 3px; left: 3px; right: 3px; background: #fbb9b6; top: 80%; border-radius: 29px; z-index: 2; box-shadow: rgba(96, 75, 74, 0.1882352941) 0px 5px 5px 0px inset; overflow: hidden; transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .card .bottom .content { position: absolute; bottom: 0; left: 1.5rem; right: 1.5rem; height: 160px; } .card .bottom .content .name { display: block; font-size: 1.2rem; color: white; font-weight: bold; } .card .bottom .content .about-me { display: block; font-size: 0.9rem; color: white; margin-top: 1rem; } .card .bottom .bottom-bottom { position: absolute; bottom: 1rem; left: 1.5rem; right: 1.5rem; display: flex; align-items: center; justify-content: space-between; } .card .bottom .bottom-bottom .social-links-container { display: flex; gap: 1rem; } .card .bottom .bottom-bottom .social-links-container svg { height: 20px; fill: white; filter: drop-shadow(0 5px 5px rgba(165, 132, 130, 0.1333333333)); } .card .bottom .bottom-bottom .social-links-container svg:hover { fill: #f55d56; transform: scale(1.2); } .card .bottom .bottom-bottom .button { background: white; color: #fbb9b6; border: none; border-radius: 20px; font-size: 0.6rem; padding: 0.4rem 0.6rem; box-shadow: rgba(165, 132, 130, 0.1333333333) 0px 5px 5px 0px; } .card .bottom .bottom-bottom .button:hover { background: #f55d56; color: white; } .card:hover { border-top-left-radius: 55px; } .card:hover .bottom { top: 20%; border-radius: 80px 29px 29px 29px; transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s; } .card:hover .profile-pic { width: 100px; height: 100px; aspect-ratio: 1; top: 10px; left: 10px; border-radius: 50%; z-index: 3; border: 7px solid #fbb9b6; box-shadow: rgba(96, 75, 74, 0.1882352941) 0px 5px 5px 0px; transition: all 0.5s ease-in-out, z-index 0.5s ease-in-out 0.1s; } .card:hover .profile-pic:hover { transform: scale(1.3); border-radius: 0px; } .card:hover .profile-pic img { transform: scale(2.5); -o-object-position: 0px 25px; object-position: 0px 25px; transition: all 0.5s ease-in-out 0.5s; } .card:hover .profile-pic svg { transform: scale(2.5); transition: all 0.5s ease-in-out 0.5s; }
JS
Copy