suchen

Heim  >  Artikel  >  Web-Frontend  >  Sehr praktisch! CSS implementiert den dynamischen Effekt des Drückens, wenn auf eine Schaltfläche geklickt wird

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

藏色散人
藏色散人Original
2021-08-27 10:31:3911405Durchsuche

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>

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Reines CSS3 erzeugt einen animierten Spezialeffekt, bei dem sich der Randschatten nach außen ausbreitetNächster Artikel：Reines CSS3 erzeugt einen animierten Spezialeffekt, bei dem sich der Randschatten nach außen ausbreitet

In Verbindung stehende Artikel

Mehr sehen