WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Effet verre HTML, animation CSS
131
jvad0921
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
19 November 2025
Écran de chargement animé CSS avec des points
1 March 2023
Icônes sociales CSS/HTML
19 March 2025
Animation d'ombre de texte
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