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

推薦する

DockerにRocketMQをインストールするための実装手順

目次1. 画像を取得する2. ブローカーサーバーを作成する3. ブローカーを作成する4. Rocke...

v-html レンダリング コンポーネントの問題

以前 HTML を解析したことがあるので、今日は Vue ドラッグ アンド ドロップを使用して、Ku...

js におけるイベントバブリングとイベントキャプチャの簡単な分析

目次01-イベントバブリング1.1- イベントバブリングの概要1.2-イベントバブリングの利用(イベ...

W3C が推奨するモバイル Web マークアップ言語 XHTML Basic 1.1

W3C は最近、「 XHTML Basic1.1 」と「 Mobile Web Best Prac...

テキストスクロール後の自動停止効果の例

効果は非常にシンプルで、次のコードを自分のページにコピーして実行するだけです。コードをコピーコードは...

nginx で複数のフロントエンド プロジェクトをデプロイするいくつかの方法

nginx を使用して 1 つのサーバーに複数のフロントエンド プロジェクトをデプロイする 3 つの...

SpringBoot と Docker の統合の詳細なプロセス

目次1. デモプロジェクト1.1 インターフェースの準備1.2 構成の準備2. Dockerがリモー...

MacにMySQLをインストールするときに忘れたパスワードを変更する方法

1. MacにMySQLデータベースをインストールする1. MySQLデータベースをダウンロードする...

MySQL でパーセンテージと最初の数パーセントを表示する方法

目次必要とする実装コードデータベース数日前、友人からこれを書くのを手伝ってほしいと頼まれました。ただ...

echarts と vue.js を統合する際に発生するいくつかの問題の概要

序文現在、私は Beetlex のデータ分析プラットフォームに取り組んでいます。この製品の開発では、...

CSS でのナビゲーション バーとドロップダウン メニューの実装

1. CSSナビゲーションバー(1)ナビゲーションバーの機能ナビゲーション バーを使いこなすことは、...

Linux ログ表示方法 6 つのまとめ

バックエンド プログラマーは、さまざまな場所で Linux を扱います。Linux ログの読み方がわ...

ウェブページ作成時のHTMLタグの使用に注意してください

この記事では、Web ページの作成を学習するときに注意すべき HTML タグに関するいくつかの問題を...

CentOS 8 インストール図 (超詳細なチュートリアル)

CentOS 8 が正式にリリースされました! CentOS は Red Hat の再配布ポリシー...

Vue+swiperでタイムライン効果を実現

この記事では、タイムライン効果を実現するためのvue+swiperの具体的なコードを参考までに共有し...