CSS3を使用してボタンホバーフラッシュダイナミック特殊効果コードを実装する

CSS3 の列シリーズ属性を使用してウォーターフォールレイアウトを作成する方法を紹介しました。興味のある方はぜひ学んでみてください。

まずは効果図を見てみましょう

この効果がどのように達成されるかを見てみましょう。

まず、HTML 部分で、ボタンを囲む div コンテナーを定義し、ボタン内のタグ ペアを使用してボタンのテキストを含めます。

<div id="光沢のある影">
 <button><span>マウスオーバー</span></button>
</div> 

次に、変更のためのCSSスタイルの定義を開始します。レイアウトスタイル、色の範囲を調整します。

#光沢のある影 {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  高さ：100vh;
  背景: #1c2541;
}
ボタン {
  境界線: 2px の白実線;
  背景: 透明;
  テキスト変換:大文字;
  色: 白;
  パディング: 15px 50px;
  アウトライン: なし;
}
スパン {
  zインデックス: 20;
} 

次に、点滅するオーバーレイを作成します。

:after セレクターを使用して透明な四角形を作成し、ボタンに対して絶対的に配置します。

ボタン {
  位置: 相対的;
}
ボタン:後{
    コンテンツ： '';
    表示: ブロック;
    位置: 絶対;
    背景: 白;
    幅: 50px;
    高さ: 125px;
    不透明度: 20%;
}

最終的な効果では、傾いた四角形が点滅するので、変換を追加します: rotate(-45deg); style

ボタン:後{
    変換: 回転(-45度);
}

top属性とleft属性を使用して長方形の位置を制御します

ボタン:後{
    上: -2px;
    左: -1px;
} 

最後に、ボタンホバー点滅アニメーション効果が実現されます

これはホバー効果なので、:hoverセレクターを使用する必要があります。マウスがホバーしたときの四角形の位置を設定する必要があります。

ボタン:ホバー:後{
  左: 120%;
}

この突然の位置の変化は、私たちが望む効果ではありません。トランジション効果を追加するには、 transition 属性を使用します。この属性は CSS3 の新しい属性であるため、他のブラウザーとの互換性を保つためにプレフィックスを追加する必要があります。

ボタン:ホバー:後{
  左: 120%;
  遷移: すべて 600ms cubic-bezier(0.3, 1, 0.2, 1);
   -webkit-transition: すべて 600ms cubic-bezier(0.3, 1, 0.2, 1);
} 

大体完成しましたが、多少の修正が必要です。

ボタン範囲内にのみ長方形のオーバーレイを表示する場合は、ボタン タグに overflow: hidden; スタイルを追加できます。

ボタン {
  オーバーフロー: 非表示;
} 

オーバーレイの位置にまだ問題があることがわかります。最終的なエフェクトでは、オーバーレイは最初は表示されません。これを調整するために、top 属性と left 属性を使用します。

ボタン:後{
    上: -36px;
    左: -100px;
} 

上記は、CSS3 を使用してボタンのホバー点滅の動的効果を実現する詳細です。

CSS3 を使用してボタンのホバーと点滅の動的効果を実現する方法については、これで終わりです。CSS3 ボタンのホバーと点滅の動的コンテンツに関する詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。