ホームページ > 記事 > ウェブフロントエンド > とても実用的です！ CSS は、ボタンがクリックされたときに押される動的な効果を実装します。
とても実用的です！ CSS は、ボタンがクリックされたときに押される動的な効果を実装します。
- 藏色散人オリジナル
- 2021-08-27 10:31:3911404ブラウズ
前回の記事「cssで3点読み込みアニメーションを素早く作成する方法」では、cssを使って3点読み込みアニメーション効果を作成する方法を紹介しました。それについて~
この記事では、ボタンがクリックされたときに押されたときの動的な効果を表示する、フロントエンド設計プロセスにおける非常に実用的な動的な効果を紹介します。アニメーション画像:
# ただし、この記事では、これを押すことによるダイナミックな効果を紹介するだけでなく、別のものを紹介します。読み続けてください。
最初の効果の実装方法:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 为按钮添加一些基本样式 */
.btn {
text-decoration: none;
border: none;
padding: 12px 40px;
font-size: 16px;
background-color: green;
color: #fff;
border-radius: 5px;
box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
cursor: pointer;
outline: none;
transition: 0.2s all;
}
/* 在按钮处于活动状态时添加转换 */
.btn:active {
transform: scale(0.98);
box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
}
</style>
</head>
<body>
<!-- 带有类'btn'的按钮 -->
<button class="btn">Button</button>
</body>
</html>効果は次のとおりです:
注:
transform 属性は、要素に 2D または 3D 変換を適用します。
CSS 変換プロパティを使用して、ボタンがアクティブなときに押す効果を追加します。 CSS 変換プロパティを使用すると、要素を拡大縮小、回転、移動、傾斜させることができます。
2 番目の効果の実装方法:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 向按钮添加基本样式 */
.btn {
padding: 15px 40px;
font-size: 16px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #ff311f;
border: none;
border-radius: 5px;
box-shadow: box-shadow:
7px 6px 28px 1px rgba(0, 0, 0, 0.24);
}
/* “active”添加样式 */
.btn:active {
box-shadow: box-shadow:
7px 6px 28px 1px rgba(0, 0, 0, 0.24);
transform: translateY(4px);
}
</style>
</head>
<body>
<button class="btn">点击我</button>
</body>
</html>効果は次のとおりです:
注: アクティブな場合pseudo-class アクティブな間は、ボタンをクリックしたときに他のメソッドを使用して独自の効果を作成できます。
PHP 中国語 Web サイト プラットフォームには、多くのビデオ教育リソースがあります。皆さんも「css ビデオ チュートリアル 」を学習してください。
以上がとても実用的です！ CSS は、ボタンがクリックされたときに押される動的な効果を実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。