CSS で魅力的なボタンのフィルアニメーションを作成する

はじめに

この実験では、CSS を使ってボタンにホバー時のフィルアニメーションを作成する方法を学びます。ユーザーがボタンの上にホバーしたときに、:hover疑似クラスを使ってボタンのbackgroundとcolorを変更し、また、変更をアニメーション化するためのトランジション効果を追加します。この実験が終わるとき、ボタンに魅力的なホバー効果を追加することで、ウェブサイトのユーザー体験を向上させることができます。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

ボタンのフィルアニメーション

VM 内には既にindex.htmlとstyle.cssが用意されています。

ホバー時のフィルアニメーションを作成するには、colorとbackgroundプロパティを設定し、変更をアニメーション化するために適切なtransitionを適用します。ホバー時にアニメーションをトリガーするには、:hover疑似クラスを使って要素のbackgroundとcolorプロパティを変更します。以下はコードの例です：

<button class="animated-fill-button">Submit</button>

.animated-fill-button {
  padding: 20px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  cursor: pointer;
  transition: 0.3s all ease-in-out;
}

.animated-fill-button:hover {
  background: #000;
  color: #fff;
}

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080タブを更新してウェブページをプレビューできます。

まとめ

おめでとうございます！あなたはボタンのフィルアニメーションの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。