WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animação CSS com efeito de vidro em HTML
128
jvad0921
Abrir no Editor
Publique Seu Código
Recomendado
22 May 2025
Controles deslizantes de três figuras 3D
15 September 2024
Vídeo de fundo
18 June 2025
Portal Escolar: Verificação de Resultados e Pagamento de Mensalidades
HTML
Copy
Andev Web
CSS
Copy
body { height: 100%; width: 100%; background: #080f1a; overflow: hidden; } .container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .glass { height: 350px; width: 200px; background: #122139; border-radius: 300px 300px 0px 0px; } .glass:before { content: ""; height: 10px; width: 10px; transform-origin: center; border: 10px solid #122139; border-radius: 100%; position: absolute; left: 87px; top: -25px; } .glass:after { content: ""; position: absolute; height: 15px; width: 250px; background: #a52a2a; top: 100%; left: -13%; } .shine { width: 12px; height: 140px; background: white; opacity: 0.2; position: absolute; left: 85%; top: 80px; border-radius: 100px; z-index: 10; } .shine:before { content: ""; width: 12px; height: 20px; position: absolute; background: white; top: 160px; border-radius: 100px; } .petals > div { position: absolute; background: #d52d58; width: 45px; height: 80px; top: 55px; transition: all 0.5s ease-out; } .petals > div:nth-child(1) { border-radius: 15px; box-shadow: 0px 0px 30px #f594b8; left: 80px; top: 60px; background: #d52d58; } .petals > div:nth-child(2), .petals > div:nth-child(4), .petals > div:nth-child(6) { background: #b81b43; left: 60px; border-radius: 0px 30px 0px 30px; transform-origin: bottom right; } .petals > div:nth-child(3), .petals > div:nth-child(5), .petals > div:nth-child(7) { background: #b81b43; left: 100px; border-radius: 30px 0px 30px 0px; transform-origin: bottom left; } .petals > div:nth-child(2) { z-index: 5; background: #ab1a3f; top: 75px; height: 70px; box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5); animation: bloom2 3s ease-in-out; animation-fill-mode: forwards; } .petals > div:nth-child(3) { z-index: 4; background: #ab1a3f; top: 75px; height: 70px; box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5); animation: bloom3 3s ease-in-out, glowing 2.5s ease-in-out infinite; animation-fill-mode: forwards; } .petals > div:nth-child(4) { z-index: 3; background: #b81b43; top: 70px; height: 75px; box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5); animation: bloom4 3s ease-in-out, glowing 2.5s ease-in-out infinite; animation-fill-mode: forwards; } .petals > div:nth-child(5) { z-index: 2; background: #b81b43; top: 70px; height: 75px; box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5); animation: bloom5 3s ease-in-out, glowing 2.5s ease-in-out infinite; animation-fill-mode: forwards; } .petals > div:nth-child(6) { z-index: 1; background: #c9204b; top: 65px; height: 70px; box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.3); animation: bloom6 3s ease-in-out, glowing 2.5s ease-in-out infinite; animation-fill-mode: forwards; } .petals > div:nth-child(7) { z-index: 0; background: #c9204b; top: 65px; height: 70px; box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.3); animation: bloom7 3s ease-in-out, glowing 2.5s ease-in-out infinite; animation-fill-mode: forwards; } .deadPetals > div { position: absolute; background: #d52d58; width: 20px; height: 15px; top: 120px; border-radius: 0px 30px 0px 30px; box-shadow: 0px 0px 30px rgba(245, 148, 184, 0.5); transition: all 0.5s ease-out; } .deadPetals > div:nth-child(1) { left: 89px; transform: rotate(-30deg); animation: falling 20s 4s ease-in-out infinite; } .deadPetals > div:nth-child(2) { left: 72px; transform: rotate(-30deg); animation: falling 20s 8s ease-in-out infinite; } .deadPetals > div:nth-child(3) { left: 88px; transform: rotate(-30deg); animation: falling 20s 12s ease-in-out infinite; } .deadPetals > div:nth-child(4) { left: 94px; transform: rotate(-30deg); animation: falling 20s 16s ease-in-out infinite; } .leaves > div:nth-last-child(1) { position: absolute; width: 55px; height: 30px; background: #338f37; top: 120px; left: 75px; border-radius: 100px; } .leaves > div:nth-child(1) { position: absolute; width: 6px; height: 210px; background: #054c05; top: 95px; left: 100px; border-radius: 0 0 100px 100px; } .leaves > div:nth-child(2) { position: absolute; width: 30px; height: 50px; top: 53px; border-radius: 5px 40px 20px 40px; background: #054c05; transform-origin: bottom; transform: rotate(-30deg); top: 180px; left: 80px; box-shadow: inset 5px 5px #066406; } .leaves > div:nth-child(3) { position: absolute; width: 30px; height: 50px; top: 53px; border-radius: 40px 5px 40px 20px; background: #054c05; transform-origin: bottom; transform: rotate(30deg); top: 150px; left: 95px; box-shadow: inset -5px 5px #066406; } .thorns > div { position: absolute; width: 0; height: 0; top: 140px; } .thorns > div:nth-child(odd) { border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #054c05; left: 105px; } .thorns > div:nth-child(even) { border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #054c05; left: 95px; } .thorns > div:nth-child(1) { top: 200px; } .thorns > div:nth-child(2) { top: 170px; } .thorns > div:nth-child(4) { top: 230px; } @keyframes bloom2 { 50% { transform: rotate(-90deg); top: 200px; left: 100px; } 100% { transform: rotate(-60deg); top: 252px; left: 50px; background: #71122a; box-shadow: 0px 0px 0px rgba(245, 148, 184, 0); } } @keyframes bloom3 { 100% { transform: rotate(45deg); } } @keyframes bloom4 { 100% { transform: rotate(-20deg); } } @keyframes bloom5 { 100% { transform: rotate(20deg); } } @keyframes bloom6 { 100% { transform: rotate(-5deg); } } @keyframes bloom7 { 100% { transform: rotate(5deg); } } @keyframes glowing { 50% { background: #d7365f; box-shadow: 0px 0px 60px #f594b8; } } @keyframes falling { 20% { top: 335px; background: #9d193b; box-shadow: 0px 0px 0px rgba(245, 148, 184, 0); } 100% { top: 335px; opacity: 0; } }
JS
Copy