純粋な CSS を使用して傘の開閉のアニメーション効果を実現する方法 (ソースコード添付)

この記事の内容は、純粋な CSS を使用して傘の開閉のアニメーション効果を実現する方法に関するものです (ソースコードが添付されています)。必要な友人はそれを参照できます。それがあなたを助けることを願っています。

エフェクトのプレビュー

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

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

コード解釈

dom を定義します。コンテナ .umbralla には 2 つの要素が含まれます。.canopy は傘のカバーを表します。.shaft 傘ハンドル:

<figure>
    <div></div>
    <div></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;
}

Use :: 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);
}

擬似要素を使用して上部を描画傘の竿の傘カバーの先端を露出させます。 頭の場合、傘カバーの上部を描くのと同じ方法で、最初に半円を描き、それを水平方向に圧縮します。 ## 傘のフック型のハンドルを描画します:

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

この時点で、傘は閉じたときのように見えます。次に、それをトグル コントロールに変える必要があります。

dom に

checkbox
コントロールを追加します: <pre class="brush:php;toolbar:false">.umbrella {     transform: rotate(-30deg); }</pre>コントロールを傘と同じ大きさに設定し、傘レイヤーの上のレイヤーに配置します:

<input>
<figure>
    <!-- 略 -->
</figure>

チェックボックス

コントロールの選択されていない状態は、傘を閉じたときの外観 (傘の現在の外観) に対応するため、対応する傘の外観を指定するだけで済みます。コントロールを開いたときに、コントロールが選択された状態になります。傘を閉じることはいくつかの要素を変形することによって得られるため、傘を開いた状態に切り替えると変形がキャンセルされます。 まず、傘を近づけます:

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

次に、傘カバーを開きます:

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

次に、傘カバーの下部を表示します:

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

最後に、いくつかの要素の上記のイージング効果を設定します:

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

完了!

以上が純粋な CSS を使用して傘の開閉のアニメーション効果を実現する方法 (ソースコード添付)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。