Sehr praktisch! CSS implementiert den dynamischen Effekt des Drückens, wenn auf eine Schaltfläche geklickt wird-CSS-Tutorial-php.cn

Sehr praktisch! CSS implementiert den dynamischen Effekt des Drückens, wenn auf eine Schaltfläche geklickt wird

藏色散人

Freigeben： 2021-08-27 10:31:59

Original

11355 Leute haben es durchsucht

Im vorherigen Artikel „So erstellen Sie schnell eine 3-Punkt-Ladeanimation mit CSS“ habe ich Ihnen vorgestellt, wie Sie mit CSS einen 3-Punkt-Ladeanimationseffekt erstellen können ~

In diesem Artikel wird es Ihnen vorgestellt. Ein sehr praktischer dynamischer Effekt im Front-End-Designprozess ist die Anzeige des dynamischen Effekts beim Klicken auf eine Schaltfläche. Sie können den Effekt möglicherweise nicht verstehen, indem Sie ihn einfach sagen bei einer Animation:

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

Aber dieser Artikel wird nicht nur den dynamischen Effekt dieser Art des Pressens vorstellen, sondern auch einen anderen, lesen Sie weiter!

Die erste Methode zur Effektimplementierung:

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

Nach dem Login kopieren

Der Effekt ist wie folgt:

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

Hinweis: Das Attribut

transform wendet eine 2D- oder 3D-Transformation auf das Element an.

Verwenden Sie die CSS-Transformationseigenschaft, um einen Druckeffekt hinzuzufügen, wenn die Schaltfläche aktiv ist. Mit der CSS-Transformationseigenschaft können wir Elemente skalieren, drehen, verschieben und neigen.

Zweite Effektimplementierungsmethode:

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

Nach dem Login kopieren

Der Effekt ist wie folgt:

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

Hinweis: Wenn die aktive Pseudoklasse aktiv ist, können Sie andere Methoden verwenden, um Ihre eigenen Effekte zu erstellen, wenn Sie auf die Schaltfläche klicken.

Die chinesische Website-Plattform PHP verfügt über viele Video-Lehrressourcen. Jeder ist herzlich willkommen, das „CSS-Video-Tutorial“ zu lernen!

Das obige ist der detaillierte Inhalt vonSehr praktisch! CSS implementiert den dynamischen Effekt des Drückens, wenn auf eine Schaltfläche geklickt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!