WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
2161
Andev.web
Abrir no Editor
Publique Seu Código
Recomendado
30 November 2024
Animações orientadas por rolagem
14 December 2024
Mensagem anônima
HTML
Copy
Andres palacio
@andres.palaciio
2.7k+ Followers
Instagram
CSS
Copy
body { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; background-color: #212121; } .container { display: flex; align-items: center; justify-content: center; height: 100vh; } .tooltip-container { position: relative; cursor: pointer; transition: all 0.2s; font-size: 17px; border-radius: 10px; } .tooltip { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 10px; opacity: 0; pointer-events: none; transition: all 0.3s; border-radius: 15px; box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2), inset -5px -5px 15px rgba(255, 255, 255, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1); } .profile { background: #2a2b2f; border-radius: 10px 15px; padding: 10px; border: 1px solid #52382f; } .tooltip-container:hover .tooltip { top: -150px; opacity: 1; visibility: visible; pointer-events: auto; } /*Andev Web*/ .icon { text-decoration: none; color: #fff; display: block; position: relative; } .layer { width: 55px; height: 55px; transition: transform 0.3s; } .icon:hover .layer { transform: rotate(-35deg) skew(20deg); } .layer span { position: absolute; top: 0; left: 0; height: 100%; width: 100%; border: 1px solid #fff; border-radius: 15px; transition: all 0.3s; } .layer span, .text { color: #e6683c; border-color: #e6683c; } .icon:hover.layer span { box-shadow: -1px 1px 3px #e6683c; } .icon .text { position: absolute; left: 50%; bottom: -5px; opacity: 0; font-weight: 500; transform: translateX(-50%); transition: bottom 0.3s ease, opacity 0.3s ease; } .icon:hover .text { bottom: -35px; opacity: 1; } .icon:hover .layer span:nth-child(1) { opacity: 0.2; } .icon:hover .layer span:nth-child(2) { opacity: 0.4; transform: translate(5px, -5px); } .icon:hover .layer span:nth-child(3) { opacity: 0.6; transform: translate(10px, -10px); } .icon:hover .layer span:nth-child(4) { opacity: 0.8; transform: translate(15px, -15px); } .icon:hover .layer span:nth-child(5) { opacity: 1; transform: translate(20px, -20px); } .instagramSVG { font-size: 25px; display: flex; align-items: center; justify-content: center; background: -webkit-linear-gradient( 45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100% ); background: linear-gradient( 45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100% ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 ); } .user { display: flex; gap: 10px; } .img img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } /* Estilos para el contenedor de la imagen */ .img { width: 50px; height: 50px; border-radius: 10px; overflow: hidden; /* Resto de los estilos para .img */ } .name { font-size: 17px; font-weight: 700; color: #e6683c; } .details { display: flex; flex-direction: column; gap: 0; color: #fff; } .about { color: #ccc; padding-top: 5px; }
JS
Copy