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

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データベースの基本構文と操作

推薦する

EXPLAIN を使って MySQL の SQL 実行プランを分析する方法

序文MySQL では、EXPLAIN コマンドを使用して、テーブルの接続方法や SELECT ステー...

MySQL 8.0.19 のインストールと設定方法のグラフィックチュートリアル

この記事は、参考のためにMySQL 8.0.19のインストールと設定のグラフィックチュートリアルを記...

Linux カーネル デバイス ドライバー proc ファイル システム ノート

/***************** * proc ファイルシステム***************...

iframe を通じて DOM 要素のサイズ変更を監視する

開発プロセス中によく発生する問題は、div のサイズ変更をどのように監視するかということです。たとえ...

MySQL 8.0 でのチェック制約の実装

みなさんこんにちは。私は技術の話ばかりして髪を切らない先生のトニーです。今回はMySQL 8.0で追...

HTML テーブルの境界線を設定する際のヒント

HTML を初めて使用する多くの人にとって、テーブル <table> は最もよく使用され...

React Native環境のインストールプロセス

react-native インストールプロセス1.npx react-native init Awe...

MySQL 8.0.11 の詳細なインストール手順

この記事では、参考までにMySQL 8.0.11のインストール手順を紹介します。具体的な内容は次のと...

CSS を使用して波状のウォーターボール効果を実装するためのサンプルコード

今日は新しいCSS特殊効果、波型ウォーターボール効果を学びました。これもとても美しいです HTML:...

Reactの仮想DOMとdiffアルゴリズムの詳細な説明

仮想DOMの役割まず、仮想 DOM の出現によってどのような問題が解決されるのかを知る必要があります...

vuexの強制リフレッシュによるデータ損失問題の分析

vuex 永続状態基本原則: すべての vuex データをローカルストレージに保存し、ページが更新さ...

MySQL 5.7.18 アーカイブ圧縮版のインストールチュートリアル

この記事では、MySQL 5.7.18アーカイブ圧縮版をインストールする具体的な方法を参考までに紹介...

Dockerがコンテナサービスを停止または削除できない問題の解決策

序文今日、開発者から、コンテナ サービスを停止、rm (docker rm -f)、または強制終了で...

MySQL 5.7 のルートパスワードログイン問題の解決策

前回の記事でMySQLサービスが起動しない問題が解決したと分かった後、パスワードなしでrootユーザ...

MYSQL SERVER のログファイルを縮小する方法

トランザクション ログには、関連するデータベースに対する操作が記録され、データベースの回復に関連する...