10 von CSS3 implementierte Ladeeffekte-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

10 von CSS3 implementierte Ladeeffekte

不言

Jun 28, 2018 pm 02:17 PM

css3loading加载

In diesem Artikel werden hauptsächlich 10 Arten von Ladeeffekten vorgestellt, die von CSS3 implementiert werden. Die Effektimplementierung ist einfach und neu und hat einen gewissen Referenzwert.

Wie viele Ladeeffekte erzielt wurden Verwenden von CSS3 Ein häufiger Ladeeffekt, obwohl er sehr einfach ist, teile ich ihn trotzdem und mache mir übrigens Notizen ...

Der erste Effekt:

Der Code lautet wie folgt:

<p class="loading">  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
</p>

.loading{   
            width: 80px;   
            height: 40px;   
            margin: 0 auto;   
            margin-top:100px;   
        }   
        .loading span{   
            display: inline-block;   
            width: 8px;   
            height: 100%;   
            border-radius: 4px;   
            background: lightgreen;   
            -webkit-animation: load 1s ease infinite;   
        }   
        @-webkit-keyframes load{   
            0%,100%{   
                height: 40px;   
                background: lightgreen;   
            }   
            50%{   
                height: 70px;   
                margin: -15px 0;   
                background: lightblue;   
            }   
        }   
        .loading span:nth-child(2){   
            -webkit-animation-delay:0.2s;   
        }   
        .loading span:nth-child(3){   
            -webkit-animation-delay:0.4s;   
        }   
        .loading span:nth-child(4){   
            -webkit-animation-delay:0.6s;   
        }   
        .loading span:nth-child(5){   
            -webkit-animation-delay:0.8s;   
        }

Der zweite Effekt:

Der Der Code lautet wie folgt:

<p class="loading">  
        <span></span>  
</p>

.loading{   
            width: 150px;   
            height: 4px;   
            border-radius: 2px;   
            margin: 0 auto;   
            margin-top:100px;   
            position: relative;   
            background: lightgreen;   
            -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;   
        }   
        .loading span{   
            display: inline-block;   
            width: 16px;   
            height: 16px;   
            border-radius: 50%;   
            background: lightgreen;   
            position: absolute;   
            margin-top: -7px;   
            margin-left:-8px;   
            -webkit-animation: changePosition 1.04s ease-in infinite alternate;   
        }   
        @-webkit-keyframes changeBgColor{   
            0%{   
                background: lightgreen;   
            }   
            100%{   
                background: lightblue;   
            }   
        }   
        @-webkit-keyframes changePosition{   
            0%{   
                background: lightgreen;   
            }   
            100%{   
                margin-left: 142px;   
                background: lightblue;   
            }   
        }

Effekte 3-5:

Der Code lautet wie folgt:

<p class="loading">  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
</p>

Die CSS-Stile des 3. bis 5. Effekts sind:

.loading{   
            width: 150px;   
            height: 15px;   
            margin: 0 auto;   
            position: relative;   
            margin-top:100px;   
        }   
        .loading span{   
            position: absolute;   
            width: 15px;   
            height: 100%;   
            border-radius: 50%;   
            background: lightgreen;   
            -webkit-animation: load 1.04s ease-in infinite alternate;   
        }   
        @-webkit-keyframes load{   
            0%{   
                opacity: 1;   
                -webkit-transform: translate(0px);   
            }   
            100%{   
                opacity: 0.2;   
                -webkit-transform: translate(150px);   
            }   
        }   
        .loading span:nth-child(1){   
            -webkit-animation-delay:0.13s;   
        }   
        .loading span:nth-child(2){   
            -webkit-animation-delay:0.26s;   
        }   
        .loading span:nth-child(3){   
            -webkit-animation-delay:0.39s;   
        }   
        .loading span:nth-child(4){   
            -webkit-animation-delay:0.52s;   
        }   
        .loading span:nth-child(5){   
            -webkit-animation-delay:0.65s;   
        }

Der 6. bis 8. Effekt Effekt:

Der Code lautet wie folgt:

<p class="loading">  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
</p>

Die CSS-Stile der 6.-8. Effekte sind:

.loading{   
            width: 150px;   
            height: 15px;   
            margin: 0 auto;   
            margin-top:100px;   
            text-align: center;   
        }   
        .loading span{   
            display: inline-block;   
            width: 15px;   
            height: 100%;   
            margin-right: 5px;   
            background: lightgreen;   
            -webkit-animation: load 1.04s ease infinite;   
        }   
        .loading span:last-child{   
            margin-right: 0px;    
        }   
        @-webkit-keyframes load{   
            0%{   
                opacity: 1;   
            }   
            100%{   
                opacity: 0;   
            }   
        }   
        .loading span:nth-child(1){   
            -webkit-animation-delay:0.13s;   
        }   
        .loading span:nth-child(2){   
            -webkit-animation-delay:0.26s;   
        }   
        .loading span:nth-child(3){   
            -webkit-animation-delay:0.39s;   
        }   
        .loading span:nth-child(4){   
            -webkit-animation-delay:0.52s;   
        }   
        .loading span:nth-child(5){   
            -webkit-animation-delay:0.65s;   
        }

Die 9.-10. Effekte:

Der Code lautet wie folgt:

<p class="loadEffect">  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
</p>

Die CSS-Stile sind :

.loadEffect{   
            width: 100px;   
            height: 100px;   
            position: relative;   
            margin: 0 auto;   
            margin-top:100px;   
        }   
        .loadEffect span{   
            display: inline-block;   
            width: 16px;   
            height: 16px;   
            border-radius: 50%;   
            background: lightgreen;   
            position: absolute;   
            -webkit-animation: load 1.04s ease infinite;   
        }   
        @-webkit-keyframes load{   
            0%{   
                opacity: 1;   
            }   
            100%{   
                opacity: 0.2;   
            }   
        }   
        .loadEffect span:nth-child(1){   
            left: 0;   
            top: 50%;   
            margin-top:-8px;   
            -webkit-animation-delay:0.13s;   
        }   
        .loadEffect span:nth-child(2){   
            left: 14px;   
            top: 14px;   
            -webkit-animation-delay:0.26s;   
        }   
        .loadEffect span:nth-child(3){   
            left: 50%;   
            top: 0;   
            margin-left: -8px;   
            -webkit-animation-delay:0.39s;   
        }   
        .loadEffect span:nth-child(4){   
            top: 14px;   
            rightright:14px;   
            -webkit-animation-delay:0.52s;   
        }   
        .loadEffect span:nth-child(5){   
            rightright: 0;   
            top: 50%;   
            margin-top:-8px;   
            -webkit-animation-delay:0.65s;   
        }   
        .loadEffect span:nth-child(6){   
            rightright: 14px;   
            bottombottom:14px;   
            -webkit-animation-delay:0.78s;   
        }   
        .loadEffect span:nth-child(7){   
            bottombottom: 0;   
            left: 50%;   
            margin-left: -8px;   
            -webkit-animation-delay:0.91s;   
        }   
        .loadEffect span:nth-child(8){   
            bottombottom: 14px;   
            left: 14px;   
            -webkit-animation-delay:1.04s;   
        }

PS: Es gibt tatsächlich viele Wiederholungen in den CSS-Stilcodes, hauptsächlich weil die Animationen unterschiedlich sind, aber um sie in Zukunft direkt verwenden zu können, habe ich gewonnen Ich werde sie jetzt nicht klären.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

CSS verwendet Sprites-Technologie, um abgerundete Ecken zu erzielen

Etwa 20 Ladeanimationen, die mit CSS3 Effective erstellt wurden

Das obige ist der detaillierte Inhalt von10 von CSS3 implementierte Ladeeffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme

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

Verwandter Artikel

Was ist CSS Grid?Apr 30, 2025 pm 03:21 PM

CSS Grid ist ein leistungsstarkes Tool zum Erstellen komplexer, reaktionsschneller Weblayouts. Es vereinfacht das Design, verbessert die Zugänglichkeit und bietet mehr Kontrolle als ältere Methoden.

Was ist CSS Flexbox?Apr 30, 2025 pm 03:20 PM

In Artikel wird CSS Flexbox erörtert, eine Layoutmethode zur effizienten Ausrichtung und Verteilung des Raums in reaktionsschnellen Designs. Es erklärt die Verwendung von Flexbox, vergleicht es mit CSS -Gitter und Details Browser -Unterstützung.

Wie können wir unsere Website mit CSS reagieren?Apr 30, 2025 pm 03:19 PM

In dem Artikel werden Techniken zum Erstellen von reaktionsschnellen Websites mithilfe von CSS erörtert, einschließlich Ansichtsfenster -Meta -Tags, flexiblen Gitter, Flüssigkeitsmedien, Medienabfragen und relativen Einheiten. Es deckt auch mit CSS -Raster und Flexbox zusammen und empfiehlt CSS -Framework

Was macht die CSS-Box-Größeneigenschaft?Apr 30, 2025 pm 03:18 PM

In dem Artikel wird die CSS-Box-Größeneigenschaft erörtert, in der die Berechnung der Elementabmessungen steuert. Es erklärt Werte wie Inhaltsbox, Border-Box und Padding-Box sowie deren Auswirkungen auf das Layout-Design und die Form von Formularausrichtung.

Wie können wir mit CSS animieren?Apr 30, 2025 pm 03:17 PM

In Artikel wird das Erstellen von Animationen mithilfe von CSS, Schlüsseleigenschaften und Kombination mit JavaScript erläutert. Hauptproblem ist die Browserkompatibilität.

Können wir mit CSS 3D -Transformationen zu unserem Projekt hinzufügen?Apr 30, 2025 pm 03:16 PM

In Artikel werden CSS für 3D -Transformationen, wichtige Eigenschaften, Browserkompatibilität und Leistungsüberlegungen für Webprojekte erläutert. (Charakterzahl: 159)

Wie können wir Gradienten in CSS hinzufügen?Apr 30, 2025 pm 03:15 PM

In dem Artikel werden CSS -Gradienten (linear, radial, wiederholt) beschrieben, um die Website -Visuals, das Hinzufügen von Tiefe, Fokus und moderne Ästhetik zu verbessern.

Was sind Pseudoelemente in CSS?Apr 30, 2025 pm 03:14 PM

In Artikel werden Pseudoelemente in CSS, deren Verwendung bei der Verbesserung des HTML-Stylings und der Unterschiede zu Pseudoklassen erläutert. Bietet praktische Beispiele.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

4 Wochen vorByDDD

Wie kann ich KB5055523 in Windows 11 nicht installieren?

3 Wochen vorByDDD

Inzoi: Wie man sich für Schule und Universität bewerbt

1 Monate vorByDDD

Wie kann ich KB5055518 in Windows 10 nicht installieren?

3 Wochen vorByDDD

Wo finden Sie den Site Office -Schlüssel in Atomfall

4 Wochen vorByDDD

Heiße Werkzeuge

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software

MantisBT

Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.

SecLists

SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.