CSS3アニメーションに基づいたマウスオーバーボタンの特殊効果の詳細な例

簡単なチュートリアル

これは、CSS3アニメーションを使用して作成されたマウスオーバーボタンアニメーションの特殊効果のセットです。このマウスオーバー ボタン アニメーションのセットには 13 の最終効果があり、それらはすべてボタンの疑似要素と CSS3 アニメーションによって作成されます。

デモを見る 使い方

HTML構造

エフェクトはハイパーリンクを通じてボタンを作成します。たとえば、 の HTML コード。最初のスワイプ効果は次のとおりです:

<a class="btn-0" href="#">Swipe</a>

CSS スタイル

便宜上、特殊効果は 5a8028ccc7a7e27417bff9f05adf5932、907fae80ddef53131f3292ee4f81644b、< ;b>、8e99a69fbe029cd4e2b854e244eab143 を除くすべての要素を除きます。 45a2772a6b6107b401db3c9b82c049c2 にはアニメーショントランジションが追加されています。

html *,
html *:before,
html *:after {
  box-sizing: border-box;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
html i, html em,
html b, html strong,
html span {
  -webkit-transition: none;
  transition: none;
}

次に、ボタンの共通スタイルを設定します。

a {
  text-decoration: none;
  line-height: 80px;
  color: black;
}
[class^="btn-"] {
  position: relative;
  display: block;
  margin: 20px auto;
  width: 100%;
  height: 80px;
  max-width: 250px;
  text-transform: uppercase;
  overflow: hidden;
  border: 1px solid currentColor;
}

最初のデモでは、ボタンの :before 擬似要素を使用して濃い紫色のスライダーを作成します。スライダーは絶対位置にあり、最初はボタンの左側にあり、マウスがボタン上をスライドすると、ボタンのフォントの色が白に変わり、:before の幅が擬似的に変化します。要素の変化は 0 です。100% です。

.btn-0 {
  color: #9a3789;
}
.btn-0:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 80px;
  background: #520c46;
}

ユーザーがボタンをクリックすると、ボタンの背景色が明るい紫に変わります。

りー

以上がCSS3アニメーションに基づいたマウスオーバーボタンの特殊効果の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。