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

-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)!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn