フロントエンド毎日戦闘：＃158ビデオコントロールトグル純粋なCSSの傘を作成する方法を示しています

画像のキャプション

結果のプレビュー

押してフルスクリーンプレビューへのリンクをクリックして、現在のページをプレビューする権利「プレビュー]をクリックします」ボタンをクリックします。

https://codepen.io/comehope/pen/pxLbjv

インタラクティブビデオ

このビデオでは、対話型である、あなたがビデオを編集して、コードのビデオを一時停止することができます。

クロム、サファリ、エッジオープンビューを使用してください。

https://scrimba.com/p/pEgDAM/cMV8euJ

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

毎日のフロントエンド戦闘シリーズ完全なソースコードはgithubのからダウンロードできます。

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

コード読み取り

定義されたDOM、容器は.umbralla二つの要素、含有.canopy傘カバーの代表.shaft傘。

<figure class="umbralla">
    <div class="canopy"></div>
    <div class="shaft"></div>
</figure>

中央揃え：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(skyblue, lightblue);
}

擬似要素の共通の属性を設定します：

.umbrella *::before,
.umbrella *::after {
    content: '';
    position: absolute;
}

傘開いた表情を描画するには。
前記コンテナのサイズは、提供されたfont-size属性値がバックを使用する必要があり、その変数の定義：

:root {
    --font-size: 10px;
}

.umbrella {
    position: relative;
    width: 25em;
    height: 26em;
    font-size: var(--font-size);
}

キャノピーのサイズを定義します。

.umbrella .canopy {
    position: absolute;
    width: inherit;
    height: 5.5em;
    top: 2.5em;
}

使用される::beforeダミー素子の天蓋上部を描画するために、この方法は、半円を描く、それを垂直方向に圧縮されます。

.umbrella .canopy::before {
    width: inherit;
    height: 12.5em;
    background: rgb(100, 100, 100);
    border-radius: 12.5em 12.5em 0 0;
    transform: scaleY(0.4);
    top: -4em;
}

使用::after下半分の天蓋擬似要素を描画します：

.umbrella .canopy::after {
    width: inherit;
    height: 1.5em;
    background-color: #333;
    top: 4em;
    border-radius: 50%;
}

ポール傘を描きます：

.umbrella .shaft {
    position: absolute;
    width: 0.8em;
    height: 18em;
    background-color: rgba(100, 100, 100, 0.7);
    top: 5.5em;
    left: calc((100% - 0.8em) / 2);
}

擬似ロッド先端の傘天蓋の上面が露出している示された要素、および天蓋動画の上部と同様の方法、半円形の第1の延伸、それを水平方向に圧縮されます。

.umbrella .shaft::before {
    width: 6em;
    height: 3em;
    background-color: rgba(100, 100, 100, 0.7);
    left: calc((100% - 6em) / 2);
    top: -5.5em;
    border-radius: 6em 6em 0 0;
    transform: scaleX(0.1);
}

フック傘の柄を描きます：

.umbrella .shaft::after {
    box-sizing: border-box;
    width: 4em;
    height: 2.5em;
    border: 1em solid #333;
    top: 100%;
    left: calc(50% - 4em + 1em / 2);
    border-radius: 0 0 2.5em 2.5em;
    border-top: none;
}

傘を開くこの完了は、方法は、ドロールックス、閉じた傘の変形が続きます。
天蓋の最初の係合が、水平方向に圧縮され、垂直方向に延伸します。

.umbrella .canopy {
    transform-origin: top;
    transform: scale(0.08, 4);
}

天蓋の下半分を隠します：

.umbrella .canopy::after {
    transform: scaleY(0);
}

傘を少し硬いが逆立っているため、これほど少ないの変更を追加し、翼の傾きをしてみましょう：

.umbrella {
    transform: rotate(-30deg);
}

この時点で、また完成傘を閉じるときのように、我々はトグル制御にそれを置きます。
でDOM増加にcheckboxコントロール：

<input type="checkbox" class="toggle">
<figure class="umbrella">
    <!-- 略 -->
</figure>

大きな傘、傘のようにコントロールを設定し、上層に配置されました。

.toggle {
    position: absolute;
    filter: opacity(0);
    width: 25em;
    height: 26em;
    font-size: var(--font-size);
    cursor: pointer;
    z-index: 2;
}

checkbox傘のような、あれば指定したコントロールが選択されているように、それは傘を開いたときのような状態に対応する現在傘を閉じるときのような対応の未チェックの制御。傘が閉じ変形がいくつかの要素を取得しているので、それが開いた状態の傘が変形解除に変換されます。
傘正オーバーをしてみましょう：

.toggle:checked ~ .umbrella {
    transform: rotate(0deg);
}

そして、キャノピーを開きます。

.toggle:checked ~ .umbrella .canopy {
    transform: scale(1, 1);
}

再び天蓋の下半分には示しています。

.toggle:checked ~ .umbrella .canopy::after {
    transform: scaleY(1);
}

最後に、いくつかの要素よりも多くの緩和効果を設定します。

.umbrella,
.umbrella .canopy,
.umbrella .canopy::after {
    transition: 0.3s cubic-bezier(0.5, -0.25, 0.5, 1.25);
}

私たちは完了です。

結果のプレビュー

インタラクティブビデオ

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

コード読み取り

おすすめ