CSS を使用して簡単なハートビート効果を作成する方法を段階的に説明します (詳細なコードの説明)

前回の記事「css3を使ってテキストにアニメーション効果を加える方法をステップバイステップで教えます(コード付き)」では、css3を使ってテキストにアニメーション効果を加える方法を紹介しました。 。この記事では、CSS を使用して簡単なハートビート効果を作成する方法を紹介しますので、一緒に見てみましょう。

ccs メソッドを使用すると、単純なハートビート エフェクトを作成できます。ボックスを追加し、ccs を駆使して表示するだけです。

1. まず、ページにビジュアル ボックスを追加し、新しいドキュメントを作成し、<div class="heart"></div> を使用してコードを記述します。コードはフレーム <div> タグ内にあります。 <p>コード例</p><pre class='brush:php;toolbar:false;'> &lt;body&gt; &lt;div class=&quot;heart&quot;&gt;&lt;/div&gt; &lt;/body&gt;</pre><p> HTMLコードが完成しました。 </p> <p>2. まずハートに変換し、<code>css を使用してアニメーションとフォント スタイルを設定し、heart 属性を使用してアニメーションを div 要素にバインドします。コードでは、head タグの間に <style type></style> を追加し、*、## と入力します。 #li, aテキストの外枠と要素の間の距離は 0、デフォルト値、下線の削除、コード例。

*{margin:0; padding:0;}
li{list-style:none;}
a{text-decoration:none;}

3. 次に、

head タグを使用して heart コード文字列を追加し、style# にテキストの相対位置を入力します。 ## タグ。幅、高さ、およびマージン属性には、1 から 4 までの値、遷移アニメーション、コード例 <pre class='brush:php;toolbar:false;'>*{margin:0; padding:0;} li{list-style:none;} a{text-decoration:none;} .heart{ position:relative; width:100px; height:100px; margin:100px; animation:scale 1s linear infinite; /*名称 1s 匀速 无限循环*/</pre>4、および最後に指定できます。アニメーション

animation

を設定します。ここで言いたいのは、animation は @keyframes と一緒に使用する必要があり、タグ間では引き続き head を使用することです。 style タグに絶対位置、幅、高さ、色、content 属性、外枠の丸い角、回転した要素、コード例<pre class='brush:php;toolbar:false;'>.heart:after, .heart:before{ position:absolute; width:70px; height:100%; background-color:red; content:&quot;&quot;; border-radius:50% 50% 0 0; } .heart:before{ left:0; transform:rotate(-52deg); } .heart:after{ right:0; transform:rotate(49deg);</pre>コード効果#を入力します。

5. 水平方向と垂直方向に 2 倍にスケールします

コード例

@keyframes scale{ /*动画帧*/ 50%{transform:scale(2)} }

コードの効果

効果が出て、面白いです。美しくなりたい友達は自分で修正できます。結局のところ、美的スキルには限界があり、全員が意見に同意するのは困難です。結局のところ、私はすべての人に認められるわけではないので、できるだけ完璧な作品を目指して努力することしかできません。

【終了】

推奨学習:

CSS3 ビデオチュートリアル