純粋な CSS を使用して蚊取り線香の燃焼効果を実現する方法 (ソースコード添付)

この記事の内容は、純粋な CSS を使用して従来の蚊取り線香効果を実現する方法に関するものです (ソースコードが添付されています)。必要な方は参考にしていただければ幸いです。助けてください。

エフェクトプレビュー

##ソースコードダウンロード

毎日のフロントエンド実践シリーズのソースコードはすべてgithubからダウンロードしてください。 :

https://github.com/comehop​​e/front-end-daily-challenges

コード解釈

dom を定義します。コンテナには 8 つのサブ要素が含まれます。

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

中央表示:

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

香皿の枠を描く:

.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;
}

枠の半分を上に配置:

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

上の枠を削除線の下端と下枠線の上端:

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

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

上下の境界線を揃えます:

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

境界線を曲線に変更します:

.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%;
}

疑似要素を使用して蚊取り線香を描画します 中間部分:

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

疑似要素を使用して蚊取り線香の点火点を描画します:

.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;
}

最後に、点火点に点滅効果を追加します:

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

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

これで完了です。

以上が純粋な CSS を使用して蚊取り線香の燃焼効果を実現する方法 (ソースコード添付)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。