hujung hadapan web
Soal Jawab bahagian hadapan
Apa yang digunakan untuk menentukan masa animasi peralihan dalam css3
Apa yang digunakan untuk menentukan masa animasi peralihan dalam css3
Dalam CSS3, anda boleh menggunakan atribut tempoh peralihan untuk menentukan masa animasi peralihan Atribut ini boleh menentukan masa yang diperlukan untuk menyelesaikan kesan peralihan (dalam saat atau milisaat). "tempoh peralihan: masa;".
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Dalam CSS3, anda boleh menggunakan atribut tempoh peralihan untuk menentukan masa animasi peralihan.
Pengenalan peralihan
Peralihan mempersembahkan peralihan, proses penukaran animasi, seperti fade-in, fade-out, animasi Tunggu dengan cepat dan perlahan-lahan.
Fungsi peralihan peralihan CSS3 lebih seperti "mentega", mencetuskan peralihan gaya yang lancar melalui beberapa tindakan CSS mudah.
1. Sifat peralihan (sifat peralihan) mentakrifkan nama sifat CSS bagi animasi peralihan
IDENT: sifat CSS yang ditentukan (lebar, tinggi, sifat warna latar belakang , dsb. )
semua: Tentukan gaya semua elemen yang menyokong atribut peralihan-sifat Secara umumnya, semua
digunakan untuk kemudahan 2. Masa yang diperlukan untuk peralihan (tempoh peralihan) mentakrifkan animasi peralihan Tempoh masa
ialah masa yang diambil daripada menetapkan atribut lama kepada menggantikan atribut baharu, dalam saat (s)
3. Fungsi animasi peralihan (fungsi pemasaan peralihan )
Nyatakan kelajuan peralihan pelayar dan kemajuan operasi semasa peralihan dengan menambahkan fungsi kepada peralihan
| 常见的过渡动画 |
|---|
| ease：速度由快到慢（默认值） |
| linear：速度恒速（匀速运动） |
| ease-in：速度越来越快（渐显效果） |
| ease-out：速度越来越慢（渐隐效果） |
| ease-in-out：速度先加速再减速（渐显渐隐效果） |
4 Masa tunda peralihan ( peralihan-tunggu )
-
Nyatakan masa apabila animasi mula dilaksanakan, dan berapa lama masa yang diperlukan untuk melaksanakan kesan peralihan selepas menukar nilai atribut elemen
Nilai positif: Kesan peralihan elemen tidak akan dicetuskan serta-merta telah melepasi
Nilai negatif: Kesan peralihan elemen Ia akan dipaparkan dari titik masa ini dan tindakan sebelumnya dipotong
0: Nilai lalai, kesan peralihan elemen dilaksanakan serta-merta
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transition-property的使用</title>
<style>
div{
background-color: red;
width: 200px;
height: 200px;
/*指定动画过渡的CSS属性 过渡时间 过渡动画 延迟时间*/
transition: background-color 2s ease-in-out 3s;
-moz-transition: background-color 2s ease-in-out 3s;
-webkit-transition: background-color 2s ease-in-out 3s;
-o-transition: background-color 2s ease-in-out 3s;
}
div:hover{
background-color: yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html> Mekanisme pencetus peralihan
Jika tiada kesan pergerakan tetikus untuk mencetuskan peralihan, dalam hakikatnya, div tidak akan berubah sama sekali. Tuding kelas pseudo ialah sejenis mekanisme peralihan yang mencetuskan. Apakah kaedah pencetus lain yang ada?
Pertanyaan media: Tentukan saiz, orientasi, dsb. peranti melalui atribut @media.
Pencetus JavaScript: Pencetus dengan skrip JavaScript.
Berikut ialah ringkasan langkah untuk menggunakan peralihan untuk melaksanakan animasi peralihan:
(1) Isytiharkan gaya keadaan awal elemen dalam gaya lalai.
(2) Isytiharkan gaya keadaan akhir unsur peralihan, seperti keadaan digantung.
(3) Tambahkan beberapa gaya berbeza dengan menambahkan fungsi peralihan kepada gaya lalai.
(Mempelajari perkongsian video:
tutorial video css,
tutorial pengenalan bahagian hadapan webAtas ialah kandungan terperinci Apa yang digunakan untuk menentukan masa animasi peralihan dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod)
Jun 28, 2022 pm 01:39 PM
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? Artikel ini akan memperkenalkan kepada anda cara menggunakan animasi SVG dan CSS untuk mencipta kesan gelombang Saya harap ia akan membantu anda!
Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod)
Jul 19, 2022 am 11:28 AM
Artikel ini akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan pelbagai butang berbentuk pelik yang kerap muncul. Saya harap ia akan membantu anda!
Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang
Jun 01, 2022 pm 07:15 PM
Dua kaedah: 1. Menggunakan atribut paparan, cuma tambah gaya "display:none;" pada elemen. 2. Gunakan kedudukan dan atribut teratas untuk menetapkan kedudukan mutlak elemen untuk menyembunyikan elemen. Cuma tambahkan gaya "position:absolute;top:-9999px;".
Bagaimana untuk melaksanakan sempadan renda dalam css3
Sep 16, 2022 pm 07:11 PM
Dalam CSS, anda boleh menggunakan atribut imej sempadan untuk mencapai sempadan renda. Atribut imej sempadan boleh menggunakan imej untuk membuat sempadan, iaitu, menambah imej latar belakang ke sempadan Anda hanya perlu menentukan imej latar belakang sebagai gaya renda; lebar sempadan imej ke dalam. Sama ada permulaan diulang;".
Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen!
Jun 10, 2022 pm 01:00 PM
Bagaimana untuk mencipta karusel teks dan karusel imej? Perkara pertama yang semua orang fikirkan ialah sama ada untuk menggunakan js Malah, karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen. Saya harap ia akan membantu semua orang.
Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3
Apr 25, 2022 pm 04:52 PM
Kaedah pelaksanaan: 1. Gunakan pemilih ":aktif" untuk memilih keadaan klik tetikus pada gambar 2. Gunakan atribut transform dan fungsi skala() untuk mencapai kesan pembesaran gambar, sintaks "img:active {transform; : skala(pembesaran paksi-x, y Pembesaran paksi);}".
Adakah kesan animasi css3 mempunyai ubah bentuk?
Apr 28, 2022 pm 02:20 PM
Kesan animasi dalam css3 mempunyai ubah bentuk; anda boleh menggunakan "animasi: atribut animasi @keyframes ..{..{transform: transformation attribute}}" untuk mencapai kesan animasi ubah bentuk Atribut animasi digunakan untuk menetapkan gaya animasi, dan atribut transform digunakan untuk menetapkan gaya ubah bentuk.
Bagaimana untuk menetapkan kelajuan putaran animasi dalam css3
Apr 28, 2022 pm 04:32 PM
Dalam CSS3, anda boleh menggunakan atribut "animation-timing-function" untuk menetapkan kelajuan putaran animasi Atribut ini digunakan untuk menentukan cara animasi akan melengkapkan kitaran dan menetapkan lengkung kelajuan animasi. animation-timing-function: nilai atribut kelajuan;}".
