ボタンの縮小アニメーションチュートリアル

はじめに

この実験では、CSS を使ってボタンの縮小アニメーションを作成する方法を探ります。この実験の目的は、ユーザーがボタンの上にマウスオーバーしたときに、スムーズで視覚的に魅力的なアニメーションを作成するために:hover疑似クラスとtransitionプロパティをどのように使うかを理解することです。この実験が終わるとき、CSS を使ってシンプルで効果的なアニメーションを作成する方法を十分に理解しているでしょう。

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

ボタンの縮小アニメーション

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

要素にマウスオーバー時の縮小アニメーションを作成するには、変更をアニメーション化するための適切なtransitionプロパティと、アニメーションをトリガーする:hover疑似クラスを使用できます。たとえば、ユーザーがクラスbutton-shrinkのボタンの上にマウスオーバーしたときにそのボタンを縮小させたい場合、次の CSS を追加できます。

.button-shrink {
  color: #65b5f6;
  background-color: transparent;
  border: 1px solid #65b5f6;
  border-radius: 4px;
  padding: 0 16px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.button-shrink:hover {
  transform: scale(0.8);
}

これにより、変更があるときにボタンのすべてのプロパティにトランジションエフェクトが適用され、ユーザーがボタンの上にマウスオーバーすると、ボタンが元のサイズの 80% に縮小します。ボタンの HTML コードは次のとおりです。

<button class="button-shrink">Submit</button>

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

まとめ

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