CSS でハートを描く 3 つの方法

以下では、CSS を使用してハートの形を描く 3 つの方法を紹介します。実装プロセスは非常にシンプルで、一目で確実に習得できます。

1. 1 つの div、1 つのハート

div を使用してハートを描画する基本的な方法は、疑似要素を使用することです。

まず、ページに div を記述します。

<div></div>

CSS を使用して、この div をオレンジ色の四角形に変更します。

div {
  位置:相対;
  上: 100px;
  左: 50%;
  幅: 100ピクセル;
  高さ: 100px;
  背景色: トマト;
}

次に、要素の 2 つの疑似要素 before と after を使用して青い円と黄色い円を描き、その中心をそれぞれ正方形の上部と右側に配置します。

div:前{
  コンテンツ： "";
  位置:絶対;
  上: -50px;
  左: 0;
  幅: 100ピクセル;
  高さ: 100px;
  境界線の半径: 50%;
  背景色: 青;
}
div:後{
  コンテンツ： "";
  位置: 絶対;
  上: 0px;
  左: 50px;
  幅: 100ピクセル;
  高さ: 100px;
  背景色: 黄色;
  境界線の半径: 50%;
}

次に、先ほど実装した 2 つの円を正方形と同じ色に変更します。

div:前{
  ...
  背景色: トマト;
}
div:後{
  ...
  背景色: トマト;
}

最後に、要素 div を 45 度回転させると、必要なハートの形が完成します。とても簡単です。

div {
  位置:相対;
  上: 100px;
  左: 50%;
  幅: 100ピクセル;
  高さ: 100px;
  背景色: トマト;
  変換: 回転(-45度);
}

2. ハートは1つだけでは足りないので、スクリーンを描きましょう

ハートひとつだけでは気持ちが伝わりにくいので、ハートのスクリーンを描きます。

❤❤❤❤❤❤❤❤❤❤❤❤

あなたに対する私の気持ちは限りなく、書きたいことも限りなくあります。

html

<h1>愛はどこにでもある...</h1>
<div class="ハート"></div>
<div class="ハート"></div>
<div class="ハート"></div>
<div class="ハート"></div>
<div class="ハート"></div>
<div class="ハート"></div>
<div class="ハート"></div>
<div class="ハート"></div>
...

画面全体を埋め尽くすようにフロートさせます。

。心臓{
  位置: 相対的;
  幅: 100ピクセル;
  高さ: 90px;
  フロート: 左;
}

2 つの疑似要素は、左心房と右心房を表します。

.heart:前、
.heart:after{
  位置: 絶対;
  コンテンツ： "";
  左: 50px;
  上: 0;
  幅: 50px;
  高さ: 80px;
  背景: #fc2e5a;
  境界線の半径: 50px 50px 0 0;
  変換原点: 0 100%;
}
.heart:after{
  左: 0;
  変換の原点:100% 100%;
}

左心房と右心房を 45 度回転させると、ハートでいっぱいの画面が表示されます。

.heart:前、
.heart:after{
  ...
  変換: 回転(-45度);
}
.heart:after{
  ...
  変換: 回転(45度);
}

3. あなたへの私の愛はどれほど深いのか

「私はかつては自分の目で物事を見ていたが、死んだ瞬間から心の目で世界を見るようになり、これまで以上にすべてをはっきりと見ることができた。」 - チャウ・シンチー

わたしにいくつ心があっても、わたしのあなたへの愛の深さは表現できません。だから、わたしの心はあなたを愛するすべての細胞でできていることを知ってほしいのです。

<div class="heart"></div>

CS: ...

。心臓 {
  位置: 絶対;
  左: 50%;
  上位: 50%;
  幅: 105px;
  高さ: 105px;
  マージン: -52.5px 0 0 -52.5px;
}

ピクセルレベルの世界は、box-shadow プロパティによって実現できます。

.heart::before {
  コンテンツ： '';
  表示: ブロック;
  遷移: すべて 400 ミリ秒;
  幅: 15px;
  高さ: 15px;
  マージン: -15px 0 0 -15px;
  Box-shadow：30px 15px＃8e1a19、45px 15px＃ac0500、75px 15px＃f73f0c、90px＃fa5f27、15px＃740100、30px 30px＃8e0500、45px 30px＃8px＃30px 34F2B、90PX 30PX＃DF351F、105PX 30PX＃F77C2A、15px 45px＃4B0000、30px 45px＃690100、45px 5px 45px＃fa5724、15px 60px＃451312、30px 60px＃5a0100、45px 60px＃840e0c、60px＃a51d1a、75px 60px＃ed2805、90px B0000、45px 75px＃5d1a1b、60px 75px＃8e1a19、75px 75px＃a80700、45px 90px＃3d0000、60px 90px
  アニメーション：パルス1.2秒ステップ(1)無限;
}

これで、ピクセルレベルのハートの形が完成しました。次に、アニメーション効果を追加して、各セルにアニメーション効果を生み出すことができます。ぜひ試してみてください。

最後に、CSS のハート型のアニメーション効果を示します。

要約する

上記は、CSS でハートを描く 3 つの方法を紹介しました。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<: クロスブラウザ開発体験のまとめ（I）HTMLタグ

>>: MySQLデータベースの基本構文と操作