👩🏾‍🤝‍👨🏼 👽 🙀 CSS3での鼓動 🚩 👩🏿‍🔧 🚰

良い一日、親愛なるhabrazhitel！今日は、CSSの無限の可能性を紹介し、美しい脈動する心の作り方を教えます。

ステップ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ブラウザー）;

アニメーションをさまざまなブラウザで動作させるには（Chrome、Safari 5、Firefoxでも動作します）、アニメーションに異なるプレフィックスのブロックを記述する必要があります。 Google Chromeブラウザーの場合を考えてみましょう。

  .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少女にとって素晴らしい贈り物になると思います。どう思いますか？

CSS3での鼓動