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
<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 (m.sbmmt.com)!
