Sangat praktikal! CSS melaksanakan kesan dinamik menekan apabila butang diklik-tutorial css-php.cn

Sangat praktikal! CSS melaksanakan kesan dinamik menekan apabila butang diklik

藏色散人

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

asal

11396 orang telah melayarinya

Dalam artikel sebelumnya "Cara membuat animasi pemuatan 3 mata dengan cepat dengan css", saya memperkenalkan anda cara menggunakan css untuk mencipta kesan animasi pemuatan 3 mata Rakan yang berminat boleh membaca dan ketahui lebih lanjut~

Artikel ini akan memperkenalkan kepada anda kesan dinamik yang sangat praktikal dalam proses reka bentuk bahagian hadapan, iaitu memaparkan kesan dinamik daripada menekan apabila butang diklik Anda mungkin tidak faham apa kesannya hanya dengan menyebutnya, kita boleh melihatnya secara langsung Gambar animasi:

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

Walau bagaimanapun, artikel ini bukan sahaja akan memperkenalkan kesan dinamik menekan yang ini, tetapi juga memperkenalkan satu lagi satu, teruskan membaca!

Kaedah pelaksanaan kesan pertama:

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

Salin selepas log masuk

Kesannya adalah seperti berikut:

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

Nota:

Atribut transformasi menggunakan transformasi 2D atau 3D pada elemen.

Gunakan sifat transformasi CSS untuk menambah kesan tekan apabila butang aktif. Sifat transformasi CSS membolehkan kami menskala, memutar, mengalih dan menyerong elemen.

Kaedah pelaksanaan kesan kedua:

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

Salin selepas log masuk

Kesannya adalah seperti berikut:

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

Nota: Apabila aktif Semasa kelas pseudo aktif, anda boleh menggunakan kaedah tambahan untuk mencipta kesan anda sendiri apabila butang diklik.

Platform tapak web PHP Cina mempunyai banyak sumber pengajaran video Selamat datang semua orang untuk mempelajari "tutorial video css"!

Atas ialah kandungan terperinci Sangat praktikal! CSS melaksanakan kesan dinamik menekan apabila butang diklik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!