Meneroka sifat animasi CSS: peralihan dan transformasi

#🎜🎜 #penerokaan atribut animasi CSS: peralihan dan transformasi

Dalam pembangunan web, untuk meningkatkan interaktiviti dan kesan visual halaman web, kami selalunya Gunakan animasi CSS untuk mengalih dan mengubah elemen. Dalam CSS, terdapat dua sifat yang biasa digunakan yang boleh mencapai kesan animasi, iaitu peralihan dan transformasi. Artikel ini akan meneroka penggunaan kedua-dua sifat ini secara mendalam dan memberikan contoh kod khusus.

1. Atribut peralihan

Atribut peralihan boleh beralih dengan lancar apabila keadaan elemen berubah. Dengan mentakrifkan masa peralihan unsur, sifat peralihan dan kesan peralihan, kami boleh mencipta kesan animasi yang lebih lancar dan lebih elegan.

Masa peralihan

Masa peralihan elemen boleh ditetapkan melalui atribut tempoh peralihan. Anda boleh menggunakan saat (s) atau milisaat (ms) sebagai unit, seperti:

.transition {
    transition-duration: 1s;
}

Transition property

Boleh ditetapkan melalui atribut peralihan-sifat Sifat peralihan unsur. Ia boleh menjadi satu atau lebih atribut, dipisahkan dengan koma, seperti:

.transition {
    transition-property: width, height;
}

Kesan peralihan

boleh ditetapkan melalui pemasaan peralihan atribut -fungsi Kesan peralihan untuk elemen. Anda boleh menggunakan nilai yang dipratentukan, seperti mudah (nilai lalai), mudah masuk, mudah keluar, mudah masuk, dll., atau anda boleh menggunakan lengkung Bezier tersuai, seperti:

.transition {
    transition-timing-function: ease-in-out;
}

#🎜🎜 #

Lengah peralihan

4. Masa tunda peralihan elemen boleh ditetapkan melalui atribut tunda peralihan. Anda boleh menggunakan saat (s) atau milisaat (ms) sebagai unit, seperti:

.transition {
    transition-delay: 0.5s;
}

Berikut ialah contoh atribut peralihan lengkap:

.transition {
    transition: width 1s ease-in-out 0.5s, height 1s ease-in-out 0.5s;
}

2. mengubah atribut #🎜🎜 #

Atribut transformasi boleh mengubah elemen, termasuk anjakan, penskalaan, putaran dan kecondongan, dsb. Dengan menetapkan nilai atribut yang berbeza, kami boleh mencipta pelbagai kesan animasi yang hebat.

Terjemahan

1. Kesan terjemahan unsur boleh dicapai melalui fungsi translate(). Anda boleh menentukan jarak terjemahan dalam arah mendatar dan menegak, seperti:

.transform {
    transform: translate(100px, 50px);
}

Skala

2. Kesan penskalaan elemen boleh dicapai melalui fungsi skala() . Anda boleh menentukan nisbah penskalaan dalam arah mendatar dan menegak, seperti:

.transform {
    transform: scale(1.5, 1.5);
}

putaran

3. Kesan putaran elemen boleh dicapai melalui fungsi rotate() . Anda boleh menentukan sudut putaran. Nilai positif bermaksud putaran mengikut arah jam, nilai negatif bermaksud putaran lawan jam, seperti:

.transform {
    transform: rotate(45deg);
}

tilt

#🎜 melalui 🎜##🎜 ( ) fungsi boleh mencapai kesan kecondongan unsur. Anda boleh menentukan sudut kecondongan dalam arah mendatar dan menegak, seperti:

4. .transform {
       transform: skew(30deg, 10deg);
   }

Berikut ialah contoh lengkap atribut transformasi:

.transform {
    transform: translate(100px, 50px) scale(1.5, 1.5) rotate(45deg) skew(30deg, 10deg);
}

Aplikasi komprehensif: gabungan peralihan dan mengubah#🎜🎜 #

Dengan menggabungkan sifat peralihan dan mengubah, kami boleh mencipta kesan animasi yang lebih cantik dan lancar. Berikut ialah contoh menggunakan kelas pseudo hover untuk melaksanakan pembesaran butang dan warna kecerunan:

.button {
    width: 100px;
    height: 40px;
    background-color: #337ab7;
    color: #ffffff;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.button:hover {
    transform: scale(1.2, 1.2);
    background-color: #5cb85c;
}

Dalam kod di atas, apabila tetikus melayang di atas butang, butang akan membesar 1.2 kali dalam 0.3 saat dan tukar daripada Biru pudar kepada hijau.

Ringkasan

Dengan mempelajari dan pemahaman mendalam tentang penggunaan atribut peralihan dan transformasi, kami boleh menambahkan lebih banyak kesan dinamik dan daya tarikan visual pada halaman web. Penggunaan kedua-dua atribut ini dengan betul boleh membawa pengalaman menyemak imbas yang lebih baik kepada pengguna. Saya harap artikel ini dapat membantu anda memahami kedua-dua sifat ini dengan lebih baik dan menggunakannya secara fleksibel dalam projek sebenar.

Atas ialah kandungan terperinci Meneroka sifat animasi CSS: peralihan dan transformasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!