Heim > Artikel > Web-Frontend > Super coole CSS3-Ladeanimationseffekte
Kurzes Tutorial
Dies ist ein cooler CSS3-Ladeanimationseffekt. Die Ladeanimation wird mit CSS3 erstellt. Der Code ist einfach und der Effekt ist sehr cool.
Verwendung
HTML-Struktur
Verwenden Sie ein dc6dce4a544fdca2df29d5ac0ea9906b-Element als Container der Ladeanimation, das über zwei untergeordnete Elemente verfügt. Darunter ist div.loading-1 der Ladefortschrittsbalken. div.loading-2 ist der Ladetext.
<div class="loader"> <div class="loading-1"></div> <div class="loading-2">Loading...</div> </div>
CSS-Stil
In dieser Ladeanimation werden drei Animationen verwendet. Die erste Ladeanimation wird verwendet, um den Fortschrittsbalken von 0 auf 100 % zu verschieben. Die zweite Drehanimation wird verwendet, um den Fortschrittsbalken in Richtung der Y-Achse zu drehen. Die dritte Bounce-Animation wird zum Text-Bouncen verwendet.
.loader { width: 150px; margin: 50px auto 70px; position: relative; } .loader .loading-1 { position: relative; width: 100%; height: 10px; border: 1px solid #69d2e7; border-radius: 10px; animation: turn 4s linear 1.75s infinite; } .loader .loading-1:before { content: ""; display: block; position: absolute; width: 0%; height: 100%; background: #69d2e7; box-shadow: 10px 0px 15px 0px #69d2e7; animation: load 2s linear infinite; } .loader .loading-2 { width: 100%; position: absolute; top: 10px; color: #69d2e7; font-size: 22px; text-align: center; animation: bounce 2s linear infinite; } @keyframes load { 0% { width: 0%; } 87.5%, 100% { width: 100%; } } @keyframes turn { 0% { transform: rotateY(0deg); } 6.25%, 50% { transform: rotateY(180deg); } 56.25%, 100% { transform: rotateY(360deg); } } @keyframes bounce { 0%,100% { top: 10px; } 12.5% { top: 30px; } }
Das Obige ist der Inhalt der supercoolen CSS3-Ladeanimations-Spezialeffekte. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!