CSS3アニメーションに基づいたマウスオーバーボタンの特殊効果の詳細な例-CSSチュートリアル-php.cn

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

巴扎黑

リリース： 2017-05-27 17:32:00

オリジナル

1644 人が閲覧しました

簡単なチュートリアル

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

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

デモを見る 使い方

HTML構造

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

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

ログイン後にコピー

CSS スタイル

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

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 サイトの他の関連記事を参照してください。