純粋な CSS を使用して折り鶴を実装する方法 (ソースコードを添付)-CSSチュートリアル-php.cn

純粋な CSS を使用して折り鶴を実装する方法 (ソースコードを添付)

不言

リリース： 2018-09-01 15:48:14

オリジナル

2384 人が閲覧しました

この記事の内容は、純粋な CSS を使用して折り鶴を実装する方法に関するものです (ソースコード付き)。必要な友人が参考になれば幸いです。

エフェクトのプレビュー

純粋な CSS を使用して折り鶴を実装する方法 (ソースコードを添付)

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

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

コード解釈

domを定義します。コンテナにはHeadを表す6つの要素が含まれています。首、体の側面、羽、尻尾、胸:

<div>
    <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-color: dodgerblue;
}

ログイン後にコピー

コンテナのサイズを定義:

.cranes {
    width: 52em;
    height: 50em;
    font-size: 7px;
}

ログイン後にコピー

折り鶴の色を白に設定:

.cranes {
    color: white;
}

ログイン後にコピー

頭を描く:

.cranes {
    position: relative;
}

.head {
    border-left: 13em solid transparent;
    border-right: 6em solid transparent;
    border-bottom: 2em solid;
    position: absolute;
    left: 0;
    top: 21;
    transform: rotate(-5deg);
}

ログイン後にコピー

上記の三角形を作成するコードはテンプレートに抽象化され、関数を呼び出すのと同様にデータが変数に変更されます:

.cranes span {
    border-left: calc(var(--left) * 1em) solid transparent;
    border-right: calc(var(--right) * 1em) solid transparent;
    border-bottom: calc(var(--bottom) * 1em) solid;
    position: absolute;
    transform: rotate(calc(var(--rotation) * 1deg));
    left: calc(var(--x) * 1em);
    top: calc(var(--y) * 1em);
}

.head {
    --left: 13;
    --right: 6;
    --bottom: 2;    
    --x: 0;
    --y: 21;
    --rotation: -5;
}

ログイン後にコピー

要素がオーバーレイされる場所に折り紙効果があるように透明度を設定します:

.cranes span {
    filter: opacity(0.6);
}

ログイン後にコピー

次のステップでは、三角形を生成する関数を 1 つずつ呼び出します。他の三角形:

首:

.neck {
    --left: 6;
    --right: 6;
    --bottom: 12;
    --x: 14;
    --y: 19;
    --rotation: 75;
}

ログイン後にコピー

体の側面:

.side {
    --left: 1.5;
    --right: 11.5;
    --bottom: 20;
    --x: 18.8;
    --y: 15.1;
    --rotation: 20;
}

ログイン後にコピー

翼:

.wing {
    --left: 18.7;
    --right: 30;
    --bottom: 8;
    --x: 6.7;
    --y: 9.2;
    --rotation: -41.9;
}

ログイン後にコピー

尻尾:

.tail {
    --left: 18.6;
    --right: 7.7;
    --bottom: 3.9;
    --x: 19.6;
    --y: 38.1;
    --rotation: -126.5;
}

ログイン後にコピー

胸:

.belly {
    --left: 6.2;
    --right: 1.8;
    --bottom: 11.5;
    --x: 17.5;
    --y: 27.8;
    --rotation: -99;
}

ログイン後にコピー

以上で折り鶴は完成です。
最後に、少しインタラクティブなエフェクトを追加します。マウスをホバーすると、直角二等辺三角形から鶴に変わります。

これで完了です。