CSS3 を使用してボタンのホバリングと点滅の動的な効果を実現する方法を段階的に説明します。-CSSチュートリアル-php.cn

CSS3 を使用してボタンのホバリングと点滅の動的な効果を実現する方法を段階的に説明します。

青灯夜游

リリース： 2021-12-10 19:20:41

オリジナル

4636 人が閲覧しました

前回の記事「ピュアCSS3でウォーターフォールフローレイアウトを作るには？」「列の簡単な分析メソッド」では、CSS3 列シリーズのプロパティを使用してウォーターフォールフローレイアウトを作成する方法を紹介しました。興味のある友人はそれについて学ぶことができます~

そして今日は見ていきます。 CSS3 を使用してウォーターフォールフローレイアウトを作成する方法で、ボタンに動的な効果を追加して、ボタンホバーの光沢のあるシャドウアニメーション効果を実現し、Web ページをよりインタラクティブで魅力的なものにします。

最初にレンダリングを見てみましょう

CSS3 を使用してボタンのホバリングと点滅の動的な効果を実現する方法を段階的に説明します。

この効果を実現する方法を検討してみましょう:

まず第一に、それは HTML パーツです 、ボタンボタンをラップする div コンテナを定義します、ボタン内でタグペアを使用してボタンテキストを含めます

<div id="shiny-shadow">
  <button><span>鼠标悬停</span></button>
</div>

ログイン後にコピー

CSS3 を使用してボタンのホバリングと点滅の動的な効果を実現する方法を段階的に説明します。

そして、[変更する CSS スタイルの定義] を開始します: レイアウトスタイル、色の範囲を調整します

#shiny-shadow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #1c2541;
}

button {
  border: 2px solid white;
  background: transparent;
  text-transform: uppercase;
  color: white;
  padding: 15px 50px;
  outline: none;
}

span {
  z-index: 20;  
}

ログイン後にコピー

CSS3 を使用してボタンのホバリングと点滅の動的な効果を実現する方法を段階的に説明します。

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

:after セレクターを使用して透明度のある四角形を作成し、ボタン button

button {
  position: relative;
}
button:after {
	content: &#39;&#39;;
	display: block;
	position: absolute;
	background: white;
	width: 50px;
	height: 125px;
	opacity: 20%;
}

ログイン後にコピー

CSS3 を使用してボタンのホバリングと点滅の動的な効果を実現する方法を段階的に説明します。

transform:rotate(-45deg);
Style## を追加します。 #
```
button:after {
	transform: rotate(-45deg);
}
```
ログイン後にコピー

CSS3 を使用してボタンのホバリングと点滅の動的な効果を実現する方法を段階的に説明します。

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

button:after {
	top: -2px;
	left: -1px;
}

ログイン後にコピー

#最後にボタンホバー点滅アニメーション効果を実装します CSS3 を使用してボタンのホバリングと点滅の動的な効果を実現する方法を段階的に説明します。

ホバー効果なので使用する必要があります

:hover

```
button:hover:after {
  left: 120%;
}
```
ログイン後にコピー

CSS3 を使用してボタンのホバリングと点滅の動的な効果を実現する方法を段階的に説明します。 #そのような位置の突然の変更は、私たちが望む効果ではありません。この属性は CSS3 の新しい属性であり、接頭辞が必要であるため、

transition

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">button:hover:after { left: 120%; transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1); -webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1); }</pre><div class="contentsignin">ログイン後にコピー</div></div>

CSS3 を使用してボタンのホバリングと点滅の動的な効果を実現する方法を段階的に説明します。大まかに達成できました。少し磨きをかけましょう。

#長方形のオーバーレイをボタン範囲内にのみ表示したい場合は、
overflow: hidden;
style

button {
  overflow: hidden;
}

ログイン後にコピー

# を追加できます。

##オーバーレイの位置にまだ問題があることがわかります。最終的なエフェクトでは、オーバーレイは表示されません。 top 属性と left 属性を使用して調整します。 CSS3 を使用してボタンのホバリングと点滅の動的な効果を実現する方法を段階的に説明します。

button:after {
	top: -36px;
	left: -100px;
}

ログイン後にコピー

CSS3 を使用してボタンのホバリングと点滅の動的な効果を実現する方法を段階的に説明します。

OK、完了です。完全なコードは以下に添付されています:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			#shiny-shadow {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100vh;
				background: #1c2541;
			}

			button {
				border: 2px solid white;
				background: transparent;
				text-transform: uppercase;
				color: white;
				padding: 15px 50px;
				outline: none;
				position: relative;
				overflow: hidden;
			}

			span {
				z-index: 20;
			}

			button:after {
				content: &#39;&#39;;
				display: block;
				position: absolute;
				background: white;
				width: 50px;
				height: 125px;
				opacity: 20%;
				transform: rotate(-45deg);
				top: -36px;
				left: -100px;
			}

			button:hover:after {
				left: 120%;
				transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
				-webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
			}
		</style>
	</head>
	<body>
		<div id="shiny-shadow">
			<button><span>鼠标悬停</span></button>
		</div>
	</body>
</html>

ログイン後にコピー

PHP 中国語 Web サイトプラットフォームには、多くのビデオ教育リソースがあります。誰もが「

css ビデオチュートリアル CSS3 を使用してボタンのホバリングと点滅の動的な効果を実現する方法を段階的に説明します。」を学習することを歓迎します。