HTML+CSS でハートビートの特殊効果を作成する

今日は、シンプルなハートビート効果を作成します。多くのコードは必要ありません。ボックスを追加し、CSS を最大限に活用して表示するだけです。

1. まず、ページにビジュアルボックスを追加します

<本文>
	<div class="ハート"></div>
 </本文>

2. まずハートの形にします

    。心臓{
		位置:相対;
		幅:100ピクセル; 
		高さ:100px;
		マージン:100px;
	 }

.heart:後、
.heart:前{
	位置:絶対;
	幅:60ピクセル;
	高さ:100%;
	背景色:#ff6666;
	コンテンツ："";
	境界線の半径:50% 50% 0 0;
}
.heart:前{
	左:0;
	変換:回転(-52度);
}
.heart:after{
	右:0;
	変換:回転(49度);
}

3. 最後に、アニメーションを設定します。ここで、アニメーションは @keyframes と一緒に使用する必要があることを述べておきます。アニメーションフレームなしでアニメーションを動かすことはできないからです。2 本の箸を使うのと同じで、1 本だけを使うことは絶対にありません。

アニメーション:スケール 1s 線形無限;
           /*名前1の均一な無限ループ*/

縦横に2倍の大きさにします

@keyframes scale{ /* アニメーションフレーム */
		50%{変換:スケール(2)}
	}

それでは効果を見てみましょう

ここに画像の説明を挿入

ハハハ、ちょっと醜いですね。気に入らなければ、自分で見た目を変えればいいんです。結局、個人の美的感覚には限界がありますからね。ハハハ。ブログを書くのは初めてで、どう表現したらいいのかわかりません。とにかく、プロセスはここにあります。ソースコードはこちらです〜

<!doctypehtml>
<html>
  <ヘッド> 
  <メタ文字セット="UTF-8">
  <title>ハートビート効果</title>
  <スタイル>
	*{マージン:0; パディング:0;}
	li{リストスタイル:なし;}
	a{テキスト装飾:なし;}

	。心臓{
		位置:相対;
		幅:100ピクセル; 
		高さ:100px;
		マージン:100px;
		アニメーション:スケール 1s 線形無限;  
		/*名前1の均一な無限ループ*/
	}
	@keyframes scale{ /*アニメーションフレームはアニメーションと一緒に使用する必要があります*/
		50%{変換:スケール(2)}
	}
	.heart:後、
	.heart:前{
		位置:絶対;
		幅:60ピクセル;
		高さ:100%;
		背景色:#ff6666;
		コンテンツ："";
		境界線の半径:50% 50% 0 0;
	}
	.heart:前{
		左:0;
		変換:回転(-52度);
	}
	.heart:after{
		右:0;
		変換:回転(49度);
	}
  </スタイル>
 </head> 

 <!-- 視覚化領域 -->
 <本文>
	<div class="ハート"></div>
 </本文>
</html>

HTML+CSS でハートビートの特殊効果を作成する方法についての記事はこれで終わりです。より関連性の高い HTML+CSS ハートビートコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<: HTML でフォームを中央揃えにする

>>: サイバーパンクスタイルのボタンを実現するためのHTML+CSS