


【css3】通過圖片輪播來了解Transform,Transition和Animation_html/css_WEB-ITnose
Jun 24, 2016 am 11:48 AM
樓主喜歡追求視覺上的享受,雖常以犧牲性能無法兼容為代價卻也樂此不疲。本文就通過一個個的demo演示來簡單了解下css3下的Transform,Transition和Animation。
本文需要實現(xiàn)效果:(請用chrome打開)
?
Transform根據(jù)我的理解,transform和width、height、background一樣,都是dom的屬性,不同的是它是css3旗下的,比較?,能夠?qū)υ瓉淼膁om元素進行移動、縮放、轉(zhuǎn)動、拉長或拉伸,跟canvas上的某些api神似,這么說來transform好像能干些js才能干的事。
transform分2D變換和3D變換,w3school中有很好的介紹和例子,具體請猛戳:CSS3 2D 轉(zhuǎn)換??CSS3 3D 轉(zhuǎn)換
為了方便查找,我把w3school上的截圖在這里保存一份:
?
Transitiontransition的解釋是過渡,我的理解是css之間的變換,但是這個變換很?很平滑,類似動畫。舉個栗子,一開始某個dom的類是classA,通過某種操作(比如被點擊了)后變成了classB,如果沒有transition,類之間的變換是很快的,機械般瞬間完成,但是有了transition,這便會是一個很緩和平滑的過程。
我們通過demo來講解transition的使用方式。
寫好如下的html文件:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css"></style> <img src='http://hanzichi.github.io/img/img0.png' / alt="【css3】通過圖片輪播來了解Transform,Transition和Animation_html/css_WEB-ITnose" >
打開來是非常簡單的一張圖,加上css:
img { -webkit-transition: all 1s ease-in-out 0s;}img:hover { -webkit-transform: rotate(360deg) scale(0.5, 0.5); opacity: 0;}
效果請猛戳:transition變換 (ps:所有demo都沒有做兼容 請用chrome打開)
是否很簡單?demo中,你只需設定好圖片(img標簽)原先的屬性和hover后的屬性,中間的變換過程全由transition搞定!而transition加在某個元素下(demo的transition加在img標簽下),仿佛設置了一個監(jiān)聽器,一旦該元素的屬性值即將要發(fā)生變化,就會自動檢查transition中的設定的屬性,一旦發(fā)現(xiàn)相匹配,則進行平滑的過渡。
transition有4個屬性,語法:transition: property duration timing-function delay 從前到后4個屬性依次可理解成“過渡動畫變換的屬性”、“過渡花費時間”、“過渡過程的速度變化”和“過渡開始前的等待時間”(默認值:all 0 ease 0 前兩個是必須的 后兩個可省略)。
如果不是所有屬性都要進行平滑過渡,或者各屬性過渡的時間、速度等設置各有需求,可以把要過渡的屬性用逗號隔開,demo可寫成:
img { -webkit-transition: -webkit-transform 1s ease-in-out 0s, opacity 1s ease-in-out 1s;}img:hover { -webkit-transform: rotate(360deg) scale(0.5, 0.5); opacity: 0;}
如果非得把transition的四個屬性分開來寫,可以這樣:
img { -webkit-transition-property: -webkit-transform, opacity; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out; -webkit-transition-delay: 0s;}
我把后三個屬性放在一起只寫了一個值(因為值一樣),你也可以像property一樣分開來寫用逗號隔開。
這里再介紹下timing-function的取值。六大取值:(還是盜圖w3cschool)
小結(jié):一般transition應用在dom的class變換中,可先行寫好機械的變換,然后添加過渡效果。
Animation
Animation的解釋是動畫,加強版的transition。
如果說transition能實現(xiàn)某些js效果,animation就更像是js了。類似于寫一個canvas特效,特效總共比如說多少時間,我們能規(guī)定在什么時候該出現(xiàn)什么樣的場景,而各個場景間的轉(zhuǎn)換則完全由css3本身負責,而keyframes好比定義了一個js方法。
主要應用在某個元素需要進行連續(xù)的n次css變換。一個簡單的demo如下:animation動畫
我們在@keyframes 中創(chuàng)建動畫時,請把它捆綁到某個選擇器,否則不會產(chǎn)生動畫效果。
通過規(guī)定至少以下兩項 CSS3 動畫屬性,即可將動畫綁定到選擇器:
demo代碼:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css"> img { /*-webkit-animation: myfirst 5s;*/ } @-webkit-keyframes myfirst { 0% { -webkit-transform: rotate(0deg) scale(1, 1); opacity: 1; } 50% { -webkit-transform: rotate(360deg) scale(0.5, 0.5); opacity: 0.5; } 100% { -webkit-transform: rotate(0deg) scale(1, 1) translate(300px, 200px); opacity: 1; } } img { -webkit-animation: myfirst 5s linear 0s 1 alternate; /*停在結(jié)束位置*/ -webkit-animation-fill-mode: forwards; }</style> <img src='http://hanzichi.github.io/img/img0.png' / alt="【css3】通過圖片輪播來了解Transform,Transition和Animation_html/css_WEB-ITnose" >
更多請猛戳 CSS3 動畫
具體應用:圖片輪播
類似應用可先寫好無過渡的代碼,然后再在class轉(zhuǎn)換之間添加transition。
該demo(圖片自動輪播)和transition有關的核心代碼就幾行,而js只是簡單的對元素的class進行賦值,動畫過程全由css3完成!
img { position: absolute; -webkit-transition: all 2s ease-out;}.disappear { opacity: 0;}.show { opacity: 1;}
當img的class從show轉(zhuǎn)換成disappear或者從disappear轉(zhuǎn)換成show時(img標簽下的class變換),就會執(zhí)行transition設置的過渡動畫。
另一個demo的實現(xiàn)也大同小異,有興趣的可以參考源碼:源碼請猛戳
?
總結(jié)總的來說,transform只是為dom增添一些屬性,而如果搭配transition或者animation則能完成一些動畫效果,我覺得實際應用較多的應該還是transition,可配合偽類或者click等事件。
樓主對以上的理解不深,如有出入,還請指出。
如需了解更多,可以參考這篇?CSS3 Transitions, Transforms和Animation使用簡介與應用展示

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

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)

Untuk menggunakan elemen butang HTML untuk mencapai butang yang boleh diklik, anda mesti menguasai penggunaan asas dan langkah berjaga -jaga yang sama. 1. Buat butang dengan tag dan tentukan tingkah laku melalui atribut jenis (seperti butang, hantar, tetapkan semula), yang dikemukakan secara lalai; 2. Tambahkan fungsi interaktif melalui JavaScript, yang boleh ditulis dalam talian atau mengikat pendengar acara melalui ID untuk meningkatkan penyelenggaraan; 3. Gunakan CSS untuk menyesuaikan gaya, termasuk warna latar belakang, sempadan, sudut bulat dan kesan status hover/aktif untuk meningkatkan pengalaman pengguna; 4. Perhatikan masalah biasa: Pastikan atribut kurang upaya tidak didayakan, peristiwa JS terikat dengan betul, oklusi susun atur, dan gunakan bantuan alat pemaju untuk menyelesaikan masalah. Menguasai ini

Metadata dalam htmlhead adalah penting untuk SEO, perkongsian sosial, dan tingkah laku penyemak imbas. 1. Tetapkan tajuk halaman dan perihalan, gunakan dan simpannya ringkas dan unik; 2. Tambahkan maklumat kad OpenGraph dan Twitter untuk mengoptimumkan kesan perkongsian sosial, perhatikan saiz imej dan gunakan alat penyahpepijatan untuk menguji; 3. Tentukan set aksara dan tetapan Viewport untuk memastikan sokongan pelbagai bahasa disesuaikan dengan terminal mudah alih; 4. Tag pilihan seperti Hak Cipta Pengarang, Kawalan Robot dan Canonical Mencegah Kandungan Duplikat juga harus dikonfigurasi dengan munasabah.

Tolearnhtmlin2025, chooseatutorialthatalishands-onpracticeWithmodernstandardsandIntegrateScsSandjavascriptbasics.1.priorit izehands-onleleingwithstep-by-stepprojectslikeBuildingapersonalprofileorbloglayout.2.ensureitcoversmodernhtmlelementssuchas,

Bagaimana membuat templat mel html dengan keserasian yang baik? Pertama, anda perlu membina struktur dengan jadual untuk mengelakkan menggunakan susun atur div flex atau grid; Kedua, semua gaya mesti digariskan dan tidak boleh bergantung pada CSS luaran; Kemudian gambar harus ditambah dengan keterangan alt dan menggunakan URL awam, dan butang harus disimulasikan dengan jadual atau TD dengan warna latar belakang; Akhirnya, anda mesti menguji dan menyesuaikan butiran mengenai pelbagai pelanggan.

Menggunakan jumlah HTML membolehkan kejelasan intuitif dan semantik untuk menambah teks kapsyen ke imej atau media. 1. Digunakan untuk membungkus kandungan media bebas, seperti gambar, video atau blok kod; 2. Ia diletakkan sebagai teks penjelasannya, dan boleh terletak di atas atau di bawah media; 3. Mereka bukan sahaja meningkatkan kejelasan struktur halaman, tetapi juga meningkatkan akses dan kesan SEO; 4. Apabila menggunakannya, anda harus memberi perhatian untuk mengelakkan penyalahgunaan, dan memohon kepada kandungan yang perlu ditekankan dan disertai dengan keterangan, bukannya gambar hiasan biasa; 5. Atribut alt yang tidak boleh diabaikan, yang berbeza dari figcaption; 6. Figcaption adalah fleksibel dan boleh diletakkan di bahagian atas atau bawah angka seperti yang diperlukan. Menggunakan kedua -dua tag ini dengan betul membantu membina semantik dan mudah difahami kandungan web.

Apabila tiada pelayan backend, penyerahan borang HTML masih boleh diproses melalui teknologi front-end atau perkhidmatan pihak ketiga. Kaedah khusus termasuk: 1. Gunakan JavaScript untuk memintas penyerahan bentuk untuk mencapai pengesahan input dan maklum balas pengguna, tetapi data tidak akan berterusan; 2. Gunakan perkhidmatan bentuk tanpa pelayan pihak ketiga seperti FormSpree untuk mengumpul data dan memberikan pemberitahuan e-mel dan fungsi semula; 3. Gunakan LocalStorage untuk menyimpan data klien sementara, yang sesuai untuk menyimpan keutamaan pengguna atau menguruskan status aplikasi tunggal halaman, tetapi tidak sesuai untuk penyimpanan jangka panjang maklumat sensitif.

Kelas, ID, Gaya, Data, dan Tajuk adalah atribut global yang paling biasa digunakan dalam HTML. Kelas digunakan untuk menentukan satu atau lebih nama kelas untuk memudahkan tetapan gaya dan operasi JavaScript; ID menyediakan pengenal unik untuk elemen, sesuai untuk lompatan sauh dan kawalan JavaScript; Gaya membolehkan gaya sebaris ditambah, sesuai untuk debugging sementara tetapi tidak disyorkan untuk kegunaan besar-besaran; sifat data digunakan untuk menyimpan data tersuai, yang mudah untuk interaksi front-end dan back-end; Tajuk digunakan untuk menambah arahan tetikus, tetapi gaya dan kelakuannya terhad oleh penyemak imbas. Pemilihan yang munasabah sifat -sifat ini dapat meningkatkan kecekapan pembangunan dan pengalaman pengguna.

Pemuatan malas asli adalah fungsi penyemak imbas terbina dalam yang membolehkan pemuatan gambar malas dengan menambah atribut pemuatan = "malas" ke tag. 1. Ia tidak memerlukan JavaScript atau perpustakaan pihak ketiga, dan digunakan secara langsung dalam HTML; 2. Ia sesuai untuk gambar yang tidak dipaparkan pada skrin pertama di bawah halaman, galeri gambar menatal tambahan dan sumber gambar yang besar; 3. Ia tidak sesuai untuk gambar dengan skrin pertama atau paparan: Tiada; 4. Apabila menggunakannya, pemegang tempat yang sesuai harus ditetapkan untuk mengelakkan susun atur susun atur; 5. Ia harus mengoptimumkan pemuatan imej responsif dalam kombinasi dengan atribut srcset dan saiz; 6. Isu keserasian perlu dipertimbangkan. Sesetengah pelayar lama tidak menyokongnya. Mereka boleh digunakan melalui pengesanan ciri dan digabungkan dengan penyelesaian JavaScript.
