Kesan peralihan CSS: bagaimana untuk mencapai kesan putaran dan penskalaan elemen

Kesan peralihan CSS: Bagaimana untuk mencapai kesan putaran dan penskalaan elemen memerlukan contoh kod khusus

Dalam reka bentuk antara muka web, kesan peralihan ialah elemen reka bentuk yang sangat penting yang boleh menyuntik sedikit daya hidup dan dinamik ke dalam halaman statik. Antaranya, kesan putaran dan penskalaan adalah kesan biasa, yang boleh menjadikan elemen halaman lebih jelas dan menarik semasa interaksi. Artikel ini akan memperkenalkan cara menggunakan CSS untuk mencapai kesan putaran dan penskalaan, serta menyediakan pelaksanaan kod khusus.

1. Mencapai kesan putaran

Untuk mencapai kesan putaran elemen, anda perlu menggunakan atribut transform dalam CSS3 Anda boleh mencapai putaran elemen melalui fungsi rotate() dalam atribut transform. Fungsi ini memerlukan satu parameter, yang mewakili sudut putaran, yang boleh menjadi nombor positif atau negatif. Apabila parameter ialah nombor positif, ia bermakna elemen berputar mengikut arah jam apabila parameter adalah nombor negatif, ia bermakna elemen berputar mengikut arah lawan jam.

Seterusnya, mari kita tunjukkan cara untuk mencapai kesan putaran unsur segi empat sama. Mula-mula, kami mencipta elemen div segi empat sama dan menetapkan beberapa gaya asas:

<div class="square"></div>

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

Seterusnya, kami menambah kod kesan putaran dalam CSS:

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    transform: rotate(45deg);
    transition: transform 1s ease;
}

Dalam kod di atas, kami menggunakan atribut transformasi dan atribut peralihan untuk Mencapai kesan putaran elemen. Antaranya, nilai atribut transform ialah rotate(45deg), yang bermaksud elemen diputarkan 45 darjah mengikut arah jam nilai atribut peralihan ialah transform 1s ease, yang bermaksud nilai atribut transform bagi elemen dialihkan pada kelajuan mudah dalam masa 1 saat. Dengan cara ini, apabila kita mengendalikan elemen semasa interaksi, kita dapat melihat kesan putaran elemen tersebut.

2. Mencapai kesan penskalaan

Untuk mencapai kesan penskalaan elemen, anda juga perlu menggunakan atribut transformasi Perbezaannya ialah kita perlu menggunakan fungsi skala() atribut transformasi untuk mencapai penskalaan elemen. Fungsi skala() memerlukan dua parameter, yang mewakili skala mendatar dan skala menegak elemen. Apabila parameter ialah 1, ia bermakna elemen mengekalkan saiz asalnya apabila parameter lebih besar daripada 1, ia bermakna elemen itu diperbesarkan apabila parameter kurang daripada 1, ia bermakna elemen itu dikurangkan.

Seterusnya, mari kita tunjukkan cara untuk mencapai kesan penskalaan unsur segi empat sama. Berbeza daripada kesan putaran, kita perlu menambah keadaan tuding pada elemen sebelum interaksi, supaya apabila pengguna menggerakkan tetikus ke atas elemen, elemen tersebut akan mempunyai kesan penskalaan. Kami mula-mula mencipta elemen div segi empat sama dan menetapkan beberapa gaya asas:

<div class="square"></div>

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

Kemudian, kami menambah kod untuk kesan zum dalam CSS:

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    transition: transform 1s ease;
}

.square:hover {
    transform: scale(1.2);
}

Dalam kod di atas, kami menggunakan atribut peralihan dan keadaan tuding untuk melaksanakan zum elemen kesan. Dalam keadaan asal, nilai atribut transformasi elemen adalah tiada dan tiada penskalaan dilakukan apabila pengguna menggerakkan tetikus ke atas elemen, kami menggunakan keadaan tuding untuk mencetuskan kesan penskalaan elemen dan menetapkan nilai atribut transformasi kepada skala( 1.2). Menunjukkan bahawa unsur itu dibesarkan 1.2 kali. Pada masa yang sama, kami juga menggunakan atribut peralihan untuk menghidupkan elemen semasa peralihan.

3. Pelaksanaan menyeluruh bagi kesan putaran dan penskalaan

Jika kita ingin mencapai kesan putaran dan penskalaan elemen pada masa yang sama, ia boleh digabungkan dan digunakan. Dalam atribut transformasi, kita boleh menggunakan berbilang fungsi untuk melaksanakan berbilang transformasi pada masa yang sama, dan kita juga boleh menggunakan atribut peralihan untuk menambah kesan animasi pada transformasi.

Seterusnya, mari kita tunjukkan cara melaksanakan kesan animasi putaran dan penskalaan bagi elemen segi empat sama. Kami mula-mula mencipta elemen div segi empat sama dan menetapkan beberapa gaya asas:

<div class="square"></div>

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

Kemudian, kami menambah kod animasi putaran dan penskalaan dalam CSS:

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    transform: rotate(0deg) scale(1);
    transition: transform 1s ease;
}

.square:hover {
    transform: rotate(45deg) scale(1.2);
}

Dalam kod di atas, kami menggunakan atribut transformasi dan atribut peralihan untuk mencapai Putaran dan kesan animasi skala elemen. Dalam keadaan asal, nilai atribut ubah bagi elemen ialah skala putar(0deg)(1), yang bermaksud bahawa elemen tidak melakukan operasi putaran dan penskalaan apabila pengguna mengalihkan tetikus ke elemen, kami menggunakan keadaan tuding untuk mencetuskan kesan animasi elemen Nilai atribut transformasi ditetapkan kepada skala putar(45deg)(1.2), yang bermaksud elemen diputar 45 darjah mengikut arah jam dan dibesarkan 1.2 kali dengan kesan animasi perlahan.

Ringkasan

Melalui demonstrasi di atas, kita dapat melihat bahawa sangat mudah untuk mencapai kesan putaran dan penskalaan elemen Ia hanya perlu menggunakan atribut transformasi dan atribut peralihan dalam CSS3 untuk mencapainya. Kita hanya perlu menggunakan fungsi rotate() dan fungsi skala() untuk mencapai kesan putaran dan penskalaan, dan kemudian gunakan atribut peralihan untuk menambah kesan peralihan yang lancar pada animasi. Pada masa yang sama, dalam aplikasi praktikal, kita boleh menggabungkan fungsi transformasi yang berbeza untuk mencipta kesan yang lebih kompleks.

Atas ialah kandungan terperinci Kesan peralihan CSS: bagaimana untuk mencapai kesan putaran dan penskalaan elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!