Heim > Web-Frontend > CSS-Tutorial > So erzielen Sie mit reinem CSS einen rautenförmigen Loader-Effekt (Quellcode im Anhang)

So erzielen Sie mit reinem CSS einen rautenförmigen Loader-Effekt (Quellcode im Anhang)

不言
Freigeben: 2018-09-18 17:42:23
Original
1977 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS, um den Diamond Loader-Effekt zu erzielen (Quellcode ist beigefügt). Ich hoffe, dass er hilfreich ist zu dir. .

Effektvorschau

So erzielen Sie mit reinem CSS einen rautenförmigen Loader-Effekt (Quellcode im Anhang)

Quellcode-Download

https://github.com/comehope/front-end-daily -challenges

Code-Interpretation

Dom definieren, ein Container enthält 9 Unterelemente:

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
Nach dem Login kopieren

Zentrierte Anzeige:

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
}
Nach dem Login kopieren

Container und Unterelement definieren Größe, Es ist ein großes Quadrat mit 9 kleinen Quadraten:

.loader {
    width: 10em;
    height: 10em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.5em;
}
Nach dem Login kopieren

Passen Sie das Muster an eine große Raute mit 9 kleinen Rauten an:

.loader {
    transform: rotate(45deg);
}
Nach dem Login kopieren

Nimmt man die vertikale kleine Raute als Einheit, ist es ein kleine Raute. Färben Sie die Blöcke:

.loader span {
    background-color: var(--c);
}

.loader span:nth-child(7) {
    --c: tomato;
}

.loader span:nth-child(4),
.loader span:nth-child(8) {
    --c: gold;
}

.loader span:nth-child(1),
.loader span:nth-child(5),
.loader span:nth-child(9) {
    --c: limegreen;
}

.loader span:nth-child(2),
.loader span:nth-child(6) {
    --c: dodgerblue;
}

.loader span:nth-child(3) {
    --c: mediumpurple;
}
Nach dem Login kopieren

Definieren Sie den Animationseffekt:

.loader span {
    animation: blinking 2s linear infinite;
    animation-delay: var(--d);
    transform: scale(0);
}

@keyframes blinking {
    0%, 100% {
        transform: scale(0);
    }

    40%, 80% {
        transform: scale(1);
    }
}
Nach dem Login kopieren

Stellen Sie abschließend die Zeitverzögerung für die kleine Raute ein, um die Dynamik zu verstärken:

.loader span:nth-child(7) {
    --d: 0s;
}

.loader span:nth-child(4),
.loader span:nth-child(8) {
    --d: 0.2s;
}

.loader span:nth-child(1),
.loader span:nth-child(5),
.loader span:nth-child(9) {
    --d: 0.4s;
}

.loader span:nth-child(2),
.loader span:nth-child(6) {
    --d: 0.6s;
}

.loader span:nth-child(3) {
    --d: 0.8s;
}
Nach dem Login kopieren

Sie' wieder fertig!

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit reinem CSS einen rautenförmigen Loader-Effekt (Quellcode im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle: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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage