CSS 疑似クラスを使用してマウスオーバー ボタンのアニメーション効果を実現する

ボタンは、開発者にとって非常に一般的な機能です。フロントエンドは通常、ユーザーエクスペリエンスを向上させるために、いくつかの操作対話スタイルをボタンに追加します。

例: ホバー スタイル、クリック スタイル、読み込みスタイルなど。簡単な例を通して、css3 アニメーションと CSS 疑似クラスについて学びましょう。

例 1

<button class="btn-1">按钮一</button>

<style>
button{
  position: relative;
  width: 100px;
  height: 40px;
  border: 1px solid #46b0ff;
  background: none;
  cursor: pointer;
}
button:after{
  position: absolute;
  content: &#39;&#39;;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.btn-1:after{
  opacity: 0; 
  background: #46b0ff;
  transition: all .3s;
  z-index: -1;
}
.btn-1:hover:after{
  opacity: 1; 
}
</style>

分析:

1. マウスとして疑似クラスを使用: ホバー イベントの後, ボタンの背景には、ここでは相対配置 (relative) と絶対配置 (absolute) が使用されます

覚えておいてください: 絶対配置の要素を使用する場合、親要素は相対配置を使用する必要があります。そうしないと、要素は表示され続けます。相対的に配置された要素を上向きに、ルート ノードまで。

2. ここでは、:hover イベントのアニメーションをトランジションで表現していますが、アニメーションは 0.3 秒で完了し、:after の透明度が変化します。すべてはすべての行動です。

もちろん、ここではより単純な実装があります。タイプを使用せずに背景を直接変更しても問題ありません。コードを参照してください:

<button class="btn-1">按钮一</button>

<style>
button{
  position: relative;
  width: 100px;
  height: 40px;
  border: 1px solid #46b0ff;
  background: none;
  cursor: pointer;
  background: rgba(70, 176, 255, 0);
  transition: all 1s;
}
.btn-1:hover{
  background: rgba(70, 176, 255, 1);
}
</style>

ok。例 1 に基づいて、さらに、例 2

例 2

<button class="btn-2">按钮二</button>

<style>
...
/* 这里省略上方的公共样式 */
.btn-2:after{
  width: 0;
  background: #f13f84;
  transition: all .3s;
  z-index: -1;
}
.btn-2:hover:after{
  width: 100%;
}
</style>

## 分析:

1 (ここと例 1) を参照してください。実際は似ていますが、ここでは疑似クラスの幅を変更します。

2. 同様に、疑似クラスの高さを変更すると、下方向に展開するアニメーションを確認できます。

<button class="btn-3">按钮三</button>

<style>
...
/* 这里省略上方的公共样式 */
.btn-2:after{
  width: 0;
  background: #f13f84;
  transition: all .3s;
  z-index: -1;
}
.btn-2:hover:after{
  width: 100%;
}
</style>

プログラミング関連の知識については、

プログラミング入門をご覧ください。 ！

以上がCSS 疑似クラスを使用してマウスオーバー ボタンのアニメーション効果を実現するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。