So verwenden Sie reines CSS, um den brennenden Effekt von Moskitospulen zu erzielen (Quellcode beigefügt)-CSS-Tutorial-php.cn

So verwenden Sie reines CSS, um den brennenden Effekt von Moskitospulen zu erzielen (Quellcode beigefügt)

不言

Freigeben： 2018-09-18 17:45:39

Original

2436 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS, um den traditionellen Effekt zum Verbrennen von Mücken zu erzielen (Quellcode ist beigefügt). Ich hoffe, dass dies der Fall ist hilfreich sein.

Effektvorschau

So verwenden Sie reines CSS, um den brennenden Effekt von Moskitospulen zu erzielen (Quellcode beigefügt)

Quellcode-Download

Bitte laden Sie den gesamten Quellcode der täglichen Front-End-Praxisserie von herunter Github:

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

Codeinterpretation

Dom definieren, der Container enthält 8 Unterelemente:

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

Nach dem Login kopieren

Zentrierte Darstellung:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, midnightblue, black);
}

Nach dem Login kopieren

Zeichnen Sie den Rahmen für den Räucherteller:

.coil {
    position: relative;
    display: flex;
    justify-content: center;
}

.coil span {
    position: absolute;
    width: calc((var(--n) * 2 - 1) * 1em);
    height: calc((var(--n) - 0.5) * 1em);
    border: 1em solid darkgreen;
}

.coil span:nth-child(1) {
    --n: 1;
}

.coil span:nth-child(2) {
    --n: 2;
}

.coil span:nth-child(3) {
    --n: 3;
}

.coil span:nth-child(4) {
    --n: 4;
}

.coil span:nth-child(5) {
    --n: 5;
}

.coil span:nth-child(6) {
    --n: 6;
}

.coil span:nth-child(7) {
    --n: 7;
}

.coil span:nth-child(8) {
    --n: 8;
}

Nach dem Login kopieren

Platzieren Sie die Hälfte des Rahmens oben:

.coil span:nth-child(odd) {
    align-self: flex-end;
}

Nach dem Login kopieren

Löschen Sie die Oberer Rahmen Der untere Rand der Linie und der obere Rand des unteren Rahmens:

.coil span:nth-child(odd) {
    border-bottom: none;
}

.coil span:nth-child(even) {
    border-top: none;
}

Nach dem Login kopieren

Richten Sie den oberen und unteren Rand aus:

.coil span:nth-child(even) {
    transform: translateX(-1em);
}

Nach dem Login kopieren

Ändern Sie den Rand in eine Kurve:

.coil span:nth-child(odd) {
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.coil span:nth-child(even) {
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

Nach dem Login kopieren

Verwenden Sie Pseudoelemente, um Moskitospulen zu zeichnen. Der mittlere Teil:

.coil::before {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: darkgreen;
    border-radius: 50%;
    left: -1.5em;
    top: -0.5em;
}

Nach dem Login kopieren

Verwenden Sie Pseudoelemente, um den Zündpunkt der Moskitospule zu zeichnen:

.coil::after {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    top: -0.5em;
    background-color: darkred;
    left: -9.5em;
    z-index: -1;
    transform: scale(0.9);
    box-shadow: 0 0 1em white;
}

Nach dem Login kopieren

Fügen Sie abschließend einen Blinkeffekt zur Zündung hinzu Punkt:

.coil::after {
    animation: blink 1s linear infinite alternate;
}

@keyframes blink {
    to {
        box-shadow: 0 0 0 white;
    }
}

Nach dem Login kopieren

Du bist fertig!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie reines CSS, um den brennenden Effekt von Moskitospulen zu erzielen (Quellcode beigefügt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!