私は仏教の蓮の大ファンを作りました|まるで公園を訪れているかのように

本文の最初の文に「「初夏のクリエイティブコンテスト」に参加しています。詳しくは、初夏のクリエイティブコンテスト」をご覧ください。

とても暑いので、エアコンは体を痛めますが、ファンはまだ快適です。

流行のせいでコミュニティから出られないので、すぐに流行を終わらせたいので、公園でボート遊びに行ったり、蓮の花を見たり、風を吹いたりできます。

待って、なぜ私は大きな蓮のファンを作ることができないのですか？公園で蓮の花がそよ風に吹かれているのを想像してみてください。見上げると青い空と白い雲が見え、見下ろすとピーナッツの木が見えます。

バックエンドプログラマーとして、いくつかの調査（也就是后端程序员临时抱佛脚查CSS资料和前端大佬之前写过的小风扇）の後、私は基本的に道を見つけました。

最初にHTMLを書く

構造を定義する

ファンには保護ネットが必要です

ファンブレードが必要

<div class="box">
    <div class="main-part">
        <div class="line-box">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
            <div class="mid-dot"></div>
        </div>
        <div class="left-box" id="leaf-id">
            <div class="leaf"></div>
            <div class="leaf"></div>
            <div class="leaf"></div>
        </div>
    </div>
</div>
</body>
复制代码

別のスタイルを行う

見た目が良いかどうかは関係ありません。重要なのは大きくすることです。幅と高さは440pxです

蓮の配色を呼び出すために、私は本当に一生懸命働いて、最終的にそれを手に入れました：おしべの粉：#ff6d6d、蓮の葉の緑：#13ce66そして青い空色：#1E9FFF

私はとても賢い小悪魔です

html,
body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.main-part {
    width: 440px;
    height: 440px;
    box-sizing: border-box;
    position: relative;
}

.main-part .left-box {
    width: 440px;
    height: 440px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 5px solid #1E9FFF;
}

.main-part .left-box .leaf {
    position: absolute;
    top: 30%;
    left: 45%;
    width: 100px;
    height: 200px;
    margin-left: -25px;
    border-radius: 50%;
    background-color: #13ce66;
    margin-top: -100px;
}

.main-part .left-box .leaf:nth-child(2) {
    transform: rotate(120deg);
    transform-origin: 50% 100%;
}

.main-part .left-box .leaf:nth-child(3) {
    transform: rotate(240deg);
    transform-origin: 50% 100%;
}

.line-box .line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 435px;
    height: 3px;
    background-color: #13ce66;
    z-index: 10;
}

.line-box .line:nth-child(2) {
    transform: rotate(30deg);
}

.line-box .line:nth-child(3) {
    transform: rotate(60deg);
}

.line-box .line:nth-child(4) {
    transform: rotate(90deg);
}

.line-box .line:nth-child(5) {
    transform: rotate(120deg);
}

.line-box .line:nth-child(6) {
    transform: rotate(150deg);
}

.line-box .mid-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    background-color: #ff6d6d;
    z-index: 11;
    border-radius: 50%;
}
复制代码

チューニング後は次のようになります。

おっと、私のファンブレードはどのようにして保護ネットから逃げましたか？

急いで最適化してください。そうしないと、危険で手を傷つけやすくなります。

ファンブレードは正常であり、ファンを上げる必要があります。そうしないと、冷却されません。

ファンをしばらく回転させます

スタイルファイルは小さなファンを回します

.leaf-ani {
    animation: ani 0.5s infinite linear;
}

@keyframes ani {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
复制代码

ファンの葉の要素とアニメーションを見つけるためのjsファイル

<script>
    let dom = document.getElementById("leaf-id");
    dom.setAttribute("class", "left-box leaf-ani")
</script>
复制代码

効果を見る

見る：

小さな扇の真ん中にあるおしべの粉、扇の緑の蓮の葉、青い空と青いフレーム、そして背景の白い雲。

この魔法の回転もあり、涼しさに加えて公園に少し自由を加えます。

ナゲッツのコード

コードでナゲッツを体験するのはとても楽しいです。

スクリーンショットを体験する

コードセグメント

相互の作用

どのフロントエンドのボスがアドバイスできるのか、なぜ私のファンは回転するときにとても魔法のように感じるのですか？？

やっと

読んでくれてありがとう、そしてみんなを歓迎します：いいね、お気に入り、コイン（焦点を合わせる）！！！