Peralihan CSS3 dalam Dreamweaver CS6

• April 30, 2024

Dengan penambahan HTML5 dan CSS3, laman web interaktif menjadi harapan. Sekarang, dengan Dreamweaver^R CS6 dan panel Transisi CSS baru, anda boleh membuat kesan interaktif anda sendiri tanpa perlu menulis sebarang kod. Output dari proses ini hanya CSS3, tanpa JavaScript. Oleh itu, anda tidak perlu risau jika penonton telah mengaktifkan JavaScript. Peralihan yang dibuat oleh Dreamweaver boleh dimainkan dalam mana-mana pelayar web moden.

Mari kita lihat betapa mudahnya untuk mencipta peralihan interaktif kita sendiri. Peralihan boleh digunakan untuk mana-mana kelas, ID atau elemen CSS. Apa yang perlu kita lakukan ialah menetapkan nilai dalam panel Transisi CSS.

1. Langkah pertama kami adalah untuk memilih elemen yang kami mahu menerapkan peralihan. Dalam contoh kami, ia akan menjadi pautan menu.
   
   
2. Klik Tetingkap - Peralihan CSS untuk membuka panel.
   
   
3. Dalam panel Peralihan CSS, klik tanda Plus untuk menambah peralihan.
   
   
4. Dalam kotak dialog Peralihan Baru, kami boleh menggunakan menu Aturan Sasaran untuk memilih dari pratet atau taip nama kami sendiri untuk peralihan. Mari taipkan nama .morph.
   
   
5. Seterusnya kita perlu memilih tindakan yang akan mencetuskan peralihan. Dari menu Transition On, pilih Hover supaya peralihan akan mencetuskan apabila kami meletakkan tetikus kami di atas pautan. Pilihan lain termasuk: aktif, diperiksa, dilumpuhkan, diaktifkan, fokus, berlegar, tidak pasti dan sasaran.
   
   
6. Untuk Pilihan Menu, kami mempunyai dua pilihan. Mari pilih yang pertama.
   
   Gunakan peralihan yang sama untuk semua hartanah
   Gunakan peralihan yang berbeza untuk setiap harta benda
   
   
7. Untuk Tempoh dan Keterlambatan peralihan, kita boleh menggunakan Seconds atau Milliseconds. Mari tentukan Tempoh hingga 1 saat dan Kelewatan kepada .05 saat.
   
   
8. Untuk Fungsi Masa, kami mempunyai beberapa pilihan pelonggaran. Mari pilih Ease Out.
   
   
9. Untuk menambah Harta CSS, klik tanda Plus dan pilih satu dari senarai pop timbul. Mari pilih Warna Latar Belakang.
   
   
10. Sebaik sahaja kami memilih Harta yang boleh kami tetapkan Nilai Akhir untuk peralihan. Bergantung pada Harta yang telah kami pilih, menu Nilai Akhir akan memberi kami menu yang sesuai untuk Harta itu. Untuk Warna Latar Belakang kami mendapat Pemilih Warna. Sekiranya kami menambah harta Font-Weight, kami mendapat menu weight preset.
    
    
11. Akhirnya kita perlu memilih Di mana untuk Buat Peralihan. Pilihan kami adalah Dokumen ini sahaja atau Fail Lembaran Gaya Baru. Mari kita gunakan yang pertama.
    
    

Sebaik sahaja kami mengklik butang Buat Peralihan, kami dapat melihat bahawa peralihan telah disenaraikan dalam panel Peralihan CSS, menunjukkan bahawa peralihan morph akan dicetuskan oleh tindakan hover dan diterapkan pada target a.morph.

Jika kita menyemak paparan kod, kita lihat kelas morph telah ditambah ke pautan.

Apabila kita lulus tetikus kita ke atas pautan dalam paparan Live, warna latar akan berubah.

Tetapi bagaimana jika kita perlu mengedit peralihan? Kita boleh melakukan ini melalui panel Transisi CSS.

1. Pilih peralihan a.morph dan ikon Edit akan menjadi aktif (ikon pensel).
   
   
2. Klik ikon Edit untuk membuka kotak dialog Edit Peralihan. Di sini kita boleh menukar nilai-nilai yang diperlukan atau menambah Hartanah dan Nilai Akhir yang baru.
   
   

Sekarang kita mempunyai peralihan morph yang dibuat, kita dapat dengan mudah menggunakannya untuk elemen-elemen lain kerana sekarang boleh didapati dari menu Aturan Sasaran.

* Adobe memberikan salinan perisian ini kepada saya untuk tujuan semakan.

Hak Cipta 2018 Adobe Systems Incorporated. Hak cipta terpelihara. Pukulan skrin produk Adobe (s) dicetak semula dengan kebenaran daripada Adobe Systems Incorporated. Adobe Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Elemen Premiere, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper adalah sama ada [a] tanda dagangan berdaftar atau tanda dagangan Adobe Systems Incorporated di Amerika Syarikat dan / atau negara lain.