CSS3 erstellt 3D-Würfel-Ladeeffekte

Kurzbeschreibung

Dies ist ein cooler 3D-Würfel-Vorladeeffekt in CSS3. Dieser Spezialeffekt verwendet einfache HTML-Elemente und CSS3-Codes, um einen Animationseffekt aus mehreren sich kontinuierlich bewegenden Würfeln zu erstellen, der sich für Seitenladeeffekte eignet.

Code-Analyse

Importieren Sie die folgenden Dateien in Ihre HTML-Datei.

<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />

HTML-Struktur

<div Klasse="demo" Stil="min-height:350px;">
<div Klasse="Container">
<div Klasse="Zeile">
<div Klasse="col-md-12">
<div Klasse="Lader">
<div Klasse="Box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div Klasse="Box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div Klasse="Box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div Klasse="Box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</div>
</div>
</div>
</div>
</div>

CSS-Stile

.loader{
                    --Größe: 32px;
                    --Dauer: 800 ms;
                    Breite: 96px;
                    Höhe: 64px;
                    Rand: 50px automatisch;
                    Transformationsstil: 3D bewahren;
                    Transform-Ursprung: 50 % 50 %;
                    transformieren: X drehen (60 Grad) Z drehen (45 Grad) Y drehen (0 Grad) Z verschieben (0px);
                    Position: relativ;
                }
                .loader .box{
                    Breite: 32px;
                    Höhe: 32px;
                    Transformationsstil: 3D bewahren;
                    Position: absolut;
                    oben: 0;
                    links: 0;
                }
                .loader .box:n-tes-Kind(1){
                    transformieren: übersetzen(100 %, 0);
                    Animation: Box1 800 ms linear unendlich;
                }
                .loader .box:n-tes-Kind(2){
                    transformieren: übersetzen(0, 100%);
                    Animation: Box2 800 ms linear unendlich;
                }
                .loader .box:n-tes-Kind(3){
                    transformieren: übersetzen(100 %, 100 %);
                    Animation: Box3 800 ms linear unendlich;
                }
                .loader .box:n-tes-Kind(4){
                    transformieren: übersetzen(200 %, 0);
                    Animation: Box4 800 ms linear unendlich;
                }
                .loader .box > div{
                    --translateZ: calc(var(--size) / 2);
                    --rotateY: 0 Grad;
                    --rotateX: 0 Grad;
                    Hintergrund: #5c8df6;
                    Breite: 100 %;
                    Höhe: 100%;
                    transformieren: Y drehen (var (--rotateY)), X drehen (var (--rotateX)), Z übersetzen (var (--translateZ));
                    Position: absolut;
                    oben: automatisch;
                    rechts: auto;
                    unten: automatisch;
                    links: auto;
                }
                .loader .box > div:nth-child(1){
                    oben: 0;
                    links: 0;
                }
                .loader .box > div:nth-child(2){
                    Hintergrund: #145af2;
                    rechts: 0;
                    --rotateY: 90 Grad;
                }
                .loader .box > div:nth-child(3){
                    Hintergrund: #447cf5;
                    --rotateX: -90 Grad;
                }
                .loader .box > div:nth-child(4){
                    Hintergrund: #dbe3f4;
                    oben: 0;
                    links: 0;
                    --translateZ: calc(var(--size) * 3 * -1);
                }
                @keyframes box1{
                    0 %, 50 % { transform: übersetzen (100 %, 0); }
                    100 % { transform: übersetzen (200 %, 0); }
                }
                @keyframes box2{
                    0 % { transform: übersetzen (0, 100 %); }
                    50 % { transform: übersetzen (0, 0); }
                    100 % { transform: übersetzen (100 %, 0); }
                }
                @keyframes box3{
                    0 %, 50 % { transform: übersetzen (100 %, 100 %); }
                    100 % { transform: übersetzen (0, 100 %); }
                }
                @keyframes box4{
                    0 % { transform: übersetzen (200 %, 0); }
                    50 % { transform: übersetzen (200 %, 100 %); }
                    100 % { transform: übersetzen (100 %, 100 %); }
                }

Oben finden Sie Einzelheiten zur Verwendung von CSS3 zum Erstellen von 3D-Würfel-Ladeeffekten. Weitere Informationen zu CSS3-Ladeeffekten finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

<<: CSS zum Ändern der Größe (Breite, Höhe) des Bildes, wenn die Maus über den Bild-Hyperlink fährt

>>: Detaillierte Erklärung des Responsive-Prinzips von Vue3