とても実用的です！ CSS は、ボタンがクリックされたときに押される動的な効果を実装します。-CSSチュートリアル-php.cn

とても実用的です！ CSS は、ボタンがクリックされたときに押される動的な効果を実装します。

藏色散人

リリース： 2021-08-27 10:31:59

オリジナル

11355 人が閲覧しました

前回の記事「cssで3点読み込みアニメーションを素早く作成する方法」では、cssを使って3点読み込みアニメーション効果を作成する方法を紹介しました。それについて~

この記事では、ボタンがクリックされたときに押されたときの動的な効果を表示する、フロントエンド設計プロセスにおける非常に実用的な動的な効果を紹介します。アニメーション画像:

GIF 2021-8-27 星期五上午 10-19-37.gif

# ただし、この記事では、これを押すことによるダイナミックな効果を紹介するだけでなく、別のものを紹介します。読み続けてください。

最初の効果の実装方法:

<!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>

<!-- 带有类&#39;btn&#39;的按钮 -->
<button class="btn">Button</button>

</body>
</html>

ログイン後にコピー

効果は次のとおりです:

GIF 2021-8-27 星期五上午 10-19-37.gif

注:

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>

ログイン後にコピー

効果は次のとおりです:

GIF 2021-8-27 星期五上午 10-27-05.gif