ステップ1： HTMLドキュメントの作成
仕事に取り掛かりましょう。 HTMLコードを書くことから始めましょう。 ハートを作成するには、空のブロック要素が1つだけ必要です。このブロック要素にハートクラスを与えます。
これで今必要です。<div class="heart"></div>
ステップ2：ハートを描く方法
下の図に示す図に従って、私たちは心を引きます。 描画アルゴリズムの詳細については、次の手順で説明します。
ステップ3：描画を開始する
ブロックサイズを100x100pxに設定し、赤を1ピクセルの厚さのフレームに設定し、上部と左側のフレームを削除しましょう。 疑似要素.heart：beforeおよび.heart：afterの場合 、寸法を70x100pxに設定し、同じ赤い境界線を1ピクセルに設定し、境界線を右に削除し、左上隅と左下隅を半径50pxで丸めます。
.heart {
位置：相対;
幅：100px;
高さ：100px;
境界線：1pxの赤い赤;
ボーダートップ：なし;
ボーダー左：なし;
}
.heart：前、.heart：後{
位置：絶対;
内容： '';
-webkit-border-radius：50px 0 0 50px; / * ChromeおよびSafariの場合* /
-moz-border-radius：50px 0 0 50px; / * Firefoxの場合* /
ボーダー半径：50px 0 0 50px;
幅：70px;
高さ：100px;
境界線：1pxの赤い赤;
ボーダー右：なし。
} ステップ4：ハートの出現
その結果、奇妙な線ができました。 それらから私たちに正しい心を作るために、あなたは以下をする必要があります：
- transformプロパティを使用して、 .heart：擬似要素の後を90 o 回転させます：rotate（90deg） ;
- ブロック要素がハートの形をとるように、疑似要素.heart：beforeおよび.heart：afterを移動します。
- ブロック要素を45 o回転させます。
その結果、次のコードを取得します。
.heart {
位置：相対;
幅：100px;
高さ：100px;
-webkit-transform：回転（45度）; / * ChromeおよびSafariの場合* /
-moz-transform：回転（45度）; / * Firefoxの場合* /
-o-transform：回転（45度）; / * Operaの場合* /
変換：回転（45度）;
境界線：1pxの赤い赤;
ボーダートップ：なし;
ボーダー左：なし;
}
.heart：前、.heart：後{
位置：絶対;
内容： '';
-webkit-border-radius：50px 0 0 50px;
-moz-border-radius：50px 0 0 50px;
ボーダー半径：50px 0 0 50px;
幅：70px;
高さ：100px;
境界線：1pxの赤い赤;
ボーダー右：なし;
左：-70px;
}
.heart：後{
位置：絶対;
左：15ピクセル。
上：-85px;
-webkit-transform：回転（90度）;
-moz-transform：回転（90度）;
-o-transform：回転（90度）;
} 
ステップ5：背景を作成する
私たちの心をより美しくするために、グラデーションの助けを借りて心を再発見します。 CSS3は公式には承認されておらず、完全にサポートされているブラウザはないため、いくつかのブラウザに個別にグラデーションを設定します。
ブロック自体のグラデーション：
.heart {
背景：赤;
/ *勾配をサポートしていないブラウザの場合* /
背景：-webkit-radial-gradient（115％50％、75px 110px、＃8B0000、＃8B0000、赤）;
/ * ChromeおよびSafariの場合* /
背景：-moz-radial-gradient（170％50％、circle、＃8B0000 0％、＃8B0000 52％、red 76％）;
/ * Firefoxの場合* /
背景：-o-radial-gradient（115％50％、75px 110px、＃8B0000、＃8B0000、赤）;
/ * Operaの場合* /
背景：放射状グラデーション（115％50％、75px 110px、＃8B0000、＃8B0000、赤）;
/ * CSS3標準に準拠* /
} .heart ：の要素：擬似要素の前 ：
.heart：{の前
背景：赤;
背景：-webkit-radial-gradient（15％50％、65px 65px、＃FFE4E1、赤）;
背景：-moz-radial-gradient（15％50％、円、＃FFE4E1、赤85％）;
背景：-o-radial-gradient（15％50％、65％65％、＃FFE4E1、赤）;
背景：放射状グラデーション（15％50％、65％65％、＃FFE4E1、赤）;
} .heart ：の要素：擬似要素の前 ：
.heart：後{
背景：赤;
背景：-webkit-radial-gradient（50％80％、85px 80px、＃FFB6C1、赤、＃8B0000）;
背景：-moz-radial-gradient（50％80％、円、＃FFB6C1、赤、＃8B0000 90％）;
背景：-o-radial-gradient（50％80％、85px 80px、＃FFB6C1、赤、＃8B0000）;
背景：放射状グラデーション（50％80％、85px 80px、＃FFB6C1、赤、＃8B0000）;
} グラジエントは、科学的な突く方法によって私が個人的に選択します;）
何らかの理由でCSS3グラデーションを理解していないブラウザには、赤いハートが表示されます。
ステップ6：心臓を鼓動させましょう
今、私たちのハートビートを作ってみてください。 CSS3の素晴らしいプロパティであるアニメーションは、これに役立ちます。 いわゆるキーフレームの名前が記録されます（アニメーション中に要素のスタイルがどのように変化するかを説明します）、アニメーションの継続時間、繰り返し回数など。
ブラウザに.heartクラスの要素をアニメーション化するように指示するには、次のように記述します。
.heart {
アニメーション名： 'anime';
/ *アニメーションのキーフレームの名前* /
アニメーション期間：300ms;
/ *アニメーションの長さ* /
アニメーション反復回数：無限。
/ *繰り返し回数、この場合-無限に* /
アニメーションの方向：代替。
/ *アニメーションを順方向および逆方向に再生します* /
アニメーションタイミング機能：イーズイン;
/ *アニメーションの時間間隔の計算。この場合、アニメーションは加速されます* /
} それでは、アニメーションのキーフレームを作成しましょう。 その中で、アニメーション中の要素は1.1倍に増加し、その後元のサイズに戻るべきであると書きます。 要素を45 o回転させたことを忘れないでください。
@keyframes 'anime' {
{から
変換：スケール（1）回転（45度）;
}
{
変換：スケール（1.1）回転（45度）;
}
}
ステップ7：クロスブラウザーの問題
実際、ブラウザーはネイティブCSS3プロパティのほとんどをまだサポートしていませんが、名前の下に独自の類似物があります。 そのため、多くのプロパティでは、最初に-webkit-や-moz-などのプレフィックスを記述する必要があります。
さまざまなブラウザの場合、プレフィックスは次のとおりです。
- -webkit- Webkitエンジン（Chrome、Safari）上のブラウザー用。
- -moz- Geckoエンジン（Firefox、SeaMonkey）のブラウザー用。
- -o- Prestoエンジンを使用するブラウザー（Opera、ニンテンドーDSブラウザー）;
.heart {
-webkit-animation-name： 'anime';
-webkit-animation-duration：300ms;
-webkit-animation-iteration-count：無限;
-webkit-animation-direction：代替;
-webkit-animation-timing-function：イーズイン;
} @ -webkit-keyframes 'anime' {
{から
-webkit-transform：スケール（1）回転（45度）;
}
{
-webkit-transform：スケール（1.1）回転（45度）;
}
}
Geckoエンジンでブラウザ用のキーフレームを記述する場合、キーフレームの名前に引用符を付ける必要はありません。
結果
結果は私にとって驚くべきものです。美しくエレガントでシンプル。 ここでデモを見ることができます 。
Mozilla Firefox 4.0以降、Safari 4、Google Chrome 3.0以降で正常に動作します。 バージョン12以降のOperaでは、グラデーションのみが表示されます。
PS：この心は、バレンタインデーのIT少女にとって素晴らしい贈り物になると思います。 どう思いますか？