Membuat animasi dan Adaptive UIS dengan CSS3

Membuat animasi dan Adaptive UIS dengan CSS3.
Dalam Nugget ini, kita akan melihat bagaimana kita dapat membumbui kami
halaman dengan menghidupkan elemen, baik 2D dan 3D
animasi, dengan menggunakan transformasi dan
transisi.
Kita juga akan melihat bagaimana kita dapat menggunakan query media untuk
menciptakan UIS yang render secara berbeda berdasarkan pada
perangkat pengguna dan beberapa properti lain yang kita dapat query
untuk mengetahui perangkat apa yang render halaman.
Ini adalah fitur fantastis yang semua orang
benar-benar bersemangat.
Jadi kita akan mendapatkan Nugget ini off dengan gambaran singkat hanya untuk
berbicara tentang transformasi, baik 2D, 3D, merasakan untuk
apa transisi adalah semua tentang.
Dan kita akan berbicara tentang pertanyaan media dan mendapatkan akrab dengan
beberapa sintaks.
Dan kemudian kita akan melompat ke lab Nugget virtual.
Kita akan mulai dengan transformasi.
Kita akan merasakan beberapa 2D sederhana dan 3D
transformasi sehingga Anda dapat melihat hal-hal yang dapat kita lakukan
terhadap unsur-unsur dan objek dalam halaman kita.
Kemudian kita akan mendapatkan akrab dengan transisi.
Kita akan melihat bagaimana kita dapat mempermudah dalam dari satu gaya ke yang lain
bukan hanya flip gaya segera.
Ini adalah indikasi visual yang baik bahwa kita transisi dari
satu gaya yang lain.
Dan di akhir di sini, kita akan melihat pertanyaan media.
Kita akan tata letak yang telah kami bangun ketika kita berbicara tentang CSS
layout, Nugget sebelumnya dari yang satu ini, di mana kita membangun
tata letak dengan flexbox a.
Dan kita akan melihat bagaimana kita bisa mengubah ukuran browser kita, dan kita
permintaan media yang akan mengambil alih setelah kami
memukul kondisi tertentu.
Dan itu akan merestrukturisasi halaman kami seluruh didasarkan pada kami
kondisi dalam gaya kami.
Jadi itu adalah fitur yang sangat, benar-benar manis.
Dan kita akan melihat baik pada cara kerjanya.
Jadi di sini kita, tiga besar hal yang kita akan bahas pada
Nugget ini.
Mari kita mulai dengan transformasi.
Jadi transformasi memungkinkan kita untuk mengubah ukuran suatu elemen,
bentuk, posisi, sudut, semua hal yang baik.
Dan kita bisa melakukannya dalam 2D ​​atau 3D.
Sekarang dalam 2D ​​, kita hanya memiliki ini xy - koordinat, dan
opsional, tergantung pada apa yang kita lakukan, sudut.
Jadi misalnya, jika kita memiliki unsur sini di katakan
0x, 0y, dan kemudian kita sebut menerjemahkan di atasnya, menerjemahkan
metode dalam CSS hanya cukup bergerak objek dari satu
lokasi ke lokasi lain di sepanjang x, y adalah.
Jadi jika kita katakan menerjemahkan 100, 100, maka akan cukup hanya
memindahkan bahwa objek 100 lebih, 100 ke bawah.
Jadi bagi pengguna, jika kita melakukan hal ini di halaman dan kami lakukan
menerjemahkan tanpa transisi, hal itu hanya akan
otomatis menghilang dari sini dan muncul di sini.
Di situlah transisi ikut bermain.
Karena dengan transisi, kita dapat mengatakan memindahkannya dari sini
di sini, hanya melakukannya di interval waktu tertentu, di
hal itu akan terlihat seperti itu bergerak.
Jadi itulah yang akan memberikan tampilan animasi.
Jadi itu benar-benar semua transformasi sekitar yang
memanipulasi sumbu untuk objek.
Dan kita punya beberapa yang berbeda
metode untuk bekerja dengan.
Ada sedikit lebih dari ini, tetapi ini adalah beberapa
yang paling populer Anda akan melihat di luar sana.
Ini adalah metode 2D.
Dan dalam dunia 2D, kita benar-benar hanya perlu khawatir tentang
x, y dan kemudian opsional sudut, tergantung pada
Metode kita panggil.
Tapi menerjemahkan, misalnya karena Anda hanya melihat, hanya bergerak
sebuah objek dari satu x, y untuk x yang lain.
Scaling adalah mengubah ukuran obyek.
Jadi obyek yang tidak bisa bergerak, tapi kami mungkin ingin memperluas
atau menyusut itu.
Skewing itu adalah cara bahwa kita dapat mengubah sebuah
objek pada x nya, sumbu y.
Dan kemudian memutar adalah bagaimana kita bergerak searah jarum jam di sekitar.
Dunia 3D hanya menambahkan dimensi lain, sumbu lain.
Sekarang kita memiliki z - axis untuk dipikirkan.
Jadi kita memiliki x, y, dan z, yang memberi kita bahwa
pesawat tiga dimensi.
Dan itu benar-benar satu-satunya perbedaan antara 2D dan
Metode 3D ​​sekarang kita memiliki parameter lain ketika kita bekerja
dengan ini.
Kami memiliki x, y.
Kami juga memiliki z.
Dan kemudian opsional tergantung pada apa yang kita bekerja dengan, kita
memiliki sudut.
Jadi ketika kita sebut menerjemahkan 3D dalam CSS kami dan kami
lulus dalam x, y, z dan sudut, kita dapat memindahkan objek di sekitar
bahwa seluruh rencana dan itu akan memberikan kita bahwa 3D tampilan dan nuansa.
Jadi, Anda akan mendapatkan visual tentang bagaimana kedua pekerjaan ini dan melihat
beberapa kode CSS sehingga Anda dapat melihat itu benar-benar tidak yang buruk untuk
bekerja dengan dan Anda dapat melakukan beberapa pretty cool dan kuat
hal dengan itu.
Transisi adalah apa yang memungkinkan kita untuk menambahkan efek visual yang
ketika kita mengubah gaya pada objek, perubahan atas
interval tertentu.
Daripada hanya berubah secara otomatis, berubah jadi
memberikan pemberitahuan visual yang baik bahwa kita bergerak
dengan gaya baru ini.
Dan contoh yang baik dari hal ini adalah menu.
Kami memiliki menu mengatur di salah satu daerah sampel kami di mana jika
kita memegang mouse kita -
dan ini adalah bagian yang sulit dari itu - kita pegang mouse kita lebih
menu itu, itu akan, lebih dari setengah detik, kemudahan ke dalamnya.
Kemudian ketika kita mengambil mouse kita dari itu, itu akan memudahkan
dari kembali ke putih.
Jadi menyiapkan transisi sangat sederhana.
Ini hanya menggunakan properti transisi, dan kemudian apa
properti yang Anda inginkan transisi terjadi di?
Kami mengatakan warna.
Dan melihat kami memiliki warna diatur di sini, dan kemudian kita memiliki
warna awal.
Jadi ini adalah deklarasi awal gaya ini.
Jadi ini adalah putih di sini -
baik, agak putih.
Ini lebih seperti putih keabu-abuan.
Segera setelah halaman merender pertama kalinya, itu duduk
pada warna ini.
Kemudian pengguna memegang mouse mereka selama ini, dan itu
akan mengambil setengah detik untuk transisi
warna ini, kuning.
Dan ketika mereka mengambil mouse mereka dari itu, maka ia akan mengambil
babak kedua lain untuk transisi kembali ke warna itu.
Dan transisi yang mudah untuk bekerja dengan dan mudah untuk membangun.
Ini hanya hanya masalah ketika kami mendirikan transisi kita
menetapkan properti kami -
dalam kasus ini, kita melakukan color - menentukan waktu Anda
menunda, dan kemudian menentukan apa yang disebut waktunya
fungsi, yang merupakan efek yang akan terjadi di sini
ketika itu waktu.
Ada kemudahan -in, kemudahan -out.
Kemudahan -in, kemudahan -out, seperti yang kami gunakan di sini, linear, dan kemudian
ada bezier juga.
Akhirnya, kami memiliki mengagumkan pertanyaan media fitur yang,
lagi, memungkinkan kita untuk membuat adaptif UIS.
Karena apa yang akan memungkinkan kita untuk melakukan - dan aku hanya akan mengambil
Browser sebagai contoh di sini - mari kita mengatakan bahwa kita secara penuh
layar dalam browser.
Dan kita menggunakan sebuah situs yang terlihat seperti ini di mana kita memiliki
header kita, footer kita, nav kami, kami
konten, dan sidebar kita.
Sekarang katakanlah kita menyusut browser kita ke bawah 600 piksel.
Apa yang akan terjadi adalah browser akan membuat - ulang
Halaman terlihat seperti sesuatu yang ada di smartphone,
sesuatu yang sedikit lebih mudah untuk bekerja
dengan di bawah 600 piksel.
Jadi itu adalah cara mudah bagus untuk menggunakan CSS murni untuk memberikan bagus
Pengalaman ramah di banyak perangkat di banyak berbeda
resolusi.
Dan di sini adalah cara kerjanya.
Kami menggunakan media direktif ini.
Dan kemudian kita mengikutinya dengan tipe.
Saat ini kami sedang mengatakan semua.
Jadi kita katakan perangkat apapun.
Setiap perangkat yang memiliki lebar maksimum 600 piksel, kita akan menggunakan
gaya ini di sini.
Apa pun yang berjalan di bawah 600 piksel, ia akan beradaptasi dan menggunakan
gaya ini.
Dan ini semua parameter di sini bisa apa saja dari layar,
yang biasanya layar komputer warna.
Ini bisa menjadi proyeksi untuk jenis proyeksi presentasi besar.
Hal ini dapat genggam untuk apa pun
yang memiliki layar kecil.
Ini bisa menjadi Braille bagi mereka Braille taktil umpan balik jenis
perangkat.
Atau seperti yang saya katakan di sini, Anda dapat menggunakan semua yang akan menargetkan
semuanya.
Ada juga maka kondisi.
Jadi kita bisa memiliki banyak, banyak kondisi jika kita ingin.
Jadi kita bisa melakukan dan lebar maksimal sebesar 600 piksel dan
orientasi landscape sama, hal semacam itu.
Dari sana itu hanya masalah pengaturan gaya kami
bawahnya sehingga ketika semua kondisi ini benar,
ini adalah gaya yang akan diterapkan.
Baiklah mari kita kepala ke lab Nugget virtual dan melihat bagaimana
semua hal ini bekerja.
Kita akan mulai dengan transformasi.
Kami akan memindahkan hal sekitar.
Kemudian kita akan menuju ke transisi.
Dan di akhir di sini, kita akan melihat permintaan media untuk membuat
UI adaptif.
Kami berada di lab Nugget virtual.
Jadi mari kita membuka Visual Studio 2012 Edition Web Developer.
Kami memiliki website baru dalam solusi kami untuk ini
seri, 17 - CSS_AnimateAdapt.
Dan kita akan mulai di sini dengan index.html kami.
Anda dapat melihat kita tidak memiliki gaya di sini sekarang.
Bahkan, jika kita melihat ini - dan jika anda sudah mengikuti
seri berurutan, Anda akan tahu kita belum benar-benar
melihat ini dalam beberapa saat karena kami bekerja dengan struktur
dan beberapa hal lain, JavaScript.
Tapi aku menambahkan segala sesuatu yang kita lakukan untuk saat ini untuk itu.
Jadi kita memiliki semua tips kami, keren mencari tips baru dengan
font ini yang kita pelajari.
Dan kita sudah mendapat menu kami diisi di sini juga.
Sehingga Anda dapat melihat semua demo di setiap teknologi di sini,
dan bahkan alat kami di sini untuk validasi yang akan membuka
Kirim Tip a.
Jadi apa yang kita akan lakukan untuk memulai adalah hanya melakukan beberapa sederhana
transformasi.
Kita akan mulai dengan transformasi 2D sederhana bahwa ketika kita
tahan mouse kami selama logo gg, itu akan meledakkannya.
Ini akan membuatnya terlihat benar-benar besar.
Dan kemudian kita akan melakukan hal yang sama dengan tips kami di sini.
Kami akan terus mouse kita di atasnya, dan kita akan meledakkannya.
Kami akan menggunakan transformasi 3D untuk melakukan itu.
Dan kemudian kita akan menggabungkan transisi.
Jadi bukan hanya muncul di hasil akhir, itu akan
transisi dari kondisi saat ini untuk itu 2D atau 3D negara.
Baik.
Jadi mari kita bermain bola di sini.
Mari kita meminimalkan browser, kepala ke gaya kami.
Dan hal pertama yang akan kita lakukan adalah bahwa logo gg.
Dan jika kita gulir ke bawah, kita bisa melihat kita memilikinya IDed, tidak
digolongkan sebagai gg.
Jadi mari kita lakukan ini.
Kita akan mengatakan gg, kita akan menerapkan gaya ke Anda.
Dan apa yang kita akan berlaku di sini adalah mari kita
hanya melakukan melayang-layang ini.
Jadi kita akan mengatakan ketika kita membawa lebih dari itu seperti begitu, kami hanya
ingin melakukan transformasi sederhana.
Kita akan menggunakan WebKit karena itu adalah Chrome
versi di sini.
Kita akan melakukan transformasi WebKit a.
Apa yang kita akan mengubah?
Kita akan menggunakan metode skala di sini.
Dan apa yang kita ingin mengubahnya ke?
Bagaimana dengan 1.5, yang akan menjadikannya salah satu setengah kali lebih besar
daripada sekarang.
Baik.
Itu cukup sederhana.
Baik.
Mari kita simpan itu, kepala kembali ke browser, refresh.
Sekarang jika kita memegang mouse kita di atasnya, menonton ini.
Boom.
Ada itu.
Jika kita mengambil mouse kita off, itu akan kembali ke ukuran aslinya.
Jadi, cara yang sangat sederhana untuk menggunakan skala untuk mengubah ukuran suatu objek.
Mari kita satu sama lain dalam sini.
Dan yang satu ini, kita akan melakukan artikel kami.
Jadi mari kita lakukan sebuah artikel.
Dan itulah yang kami tip.
Pasal, hover.
Apa yang kita inginkan untuk hover di sini?
Bagaimana kita mengubah WebKit lagi.
Hanya saja kali ini, mari kita putar.
Katakanlah mari kita putar 360 derajat di sini.
Harus baik.
Itu saja yang perlu kita lakukan.
Mari skala juga.
Dan ini adalah untuk menunjukkan bahwa Anda dapat menggabungkan
metode ini bersama-sama.
Lihat itu.
Jadi mari kita lakukan ini.
Mari kita juga skala.
Bagaimana kalau hanya 1.2?
Terlihat bagus.
Menyimpannya.
Kepala kembali ke browser, refresh, dan lihat ini.
Whoop.
Whoop.
Whoop.
Whoop.
Di sana kami pergi.
Sekarang kita zoom in
Tapi itu hanya semacam terjadi.
Kami tidak transisi itu.
Kami tidak melakukan apapun animasi.
Itu semua hanya semacam terjadi.
Jadi baik dari orang transformasi yang 2D
transformasi.
Kita dapat dengan mudah membuat 3D dengan mengetikkan 3D di sini.
Dan omong-omong, memeriksa Intellisense, di sini adalah semua
metode transformasi yang bisa kita gunakan.
Dan hanya dicatat bahwa Anda masih dapat bekerja dengan individu
metode juga.
Jika Anda hanya peduli tentang akses tertentu, maka Anda dapat
bekerja dengan itu.
Tapi mari kita pergi ke depan dan memilih memutar 3D.
Dan sekarang kita dapat menggunakan x, y, dan z di sini.
Jadi kita dapat mengatakan 50 pada x, y negatif pada 50, dan kemudian
mengatakan bagaimana sekitar 30 pada z.
Sekarang hasilnya akan terlihat sama.
Kita tidak akan melihat perbedaan sama sekali karena
Hasil akhirnya adalah sama, benar.
Jadi apa yang kita akan perlu Anda lakukan adalah menggabungkan transisi
sehingga kita dapat benar-benar melihatnya pergi dari tempat itu
itu ke tempat itu.
Dan kita akan dapat melihatnya memutar sepanjang
semua orang sumbu.
Jadi mari kita mewujudkannya.
Mari kita menambah pemilih lain di sini.
Mari kita mulai dengan gambar kita.
Dan apa yang kita akan katakan adalah WebKit transisi.
Apa properti yang ingin kita transisi dari?
Nah, kita ingin satu ini di sini karena itu satu-satunya
kami telah menyiapkan pula.
Yang itu.
Kami ingin ini terjadi transformasi.
Dan bagaimana kita akan mengatakan setengah detik.
Jadi kita akan lakukan 0.5s.
Dan kemudian sekarang apa efek yang kita inginkan?
Dan inilah semua efek yang bisa kita pilih dari sini.
Dan mari kita pergi ke depan dan memilih bagaimana tentang kemudahan -in.
Baik.
Mari kita simpan.
Tekan refresh.
Dan sekarang kita memegang mouse kami atas logo ini, lihat
bagaimana meledak.
Kami membiarkan pergi, ia pergi.
Meledak, kembali.
Jadi bukan hanya hal yang seketika.
Transisi dari gaya asli dengan gaya
bahwa kita telah diberitahu untuk transisi ke.
Mari kita satu sama lain terjadi di sini.
Mari kita artikel kami.
Dan untuk yang satu ini saya hanya akan cukup banyak melakukan
hal yang sama di sini.
Mari kita paste ini di sini.
Dan semuanya terlihat baik.
Mari kita membuat kemudahan ini pada tingkat yang lebih cepat.
Dan kami akan melakukan keduanya kemudahan masuk dan keluar untuk mempengaruhi kami.
Dan kemudian mari kita juga melakukan hal ini, hanya untuk menunjukkan Anda pertama di sini jadi
Anda dapat melihat apa yang tampak seperti di 2D.
Dan kemudian kita akan membuatnya 3D.
Tapi itu akan menyelamatkannya.
Kami akan membalik kembali ke browser.
Kami akan menekan refresh.
Dan ada itu.
Jadi sekarang itu hanya berputar di sepanjang xy.
Tidak ada z - axis kita perlu khawatir tentang di sini, hanya cukup
berputar dan zoom pada waktu yang sama.
Itu agak rapi mencari.
Sekarang, mari kita buat 3D ini.
Sekali lagi di sini, mari kita pergi 50, negatif 50, 30.
Kami akan menyimpannya, kembali, refresh.
Dan sekarang itu akan terlihat seperti - melihat bagaimana kita punya bahwa
z - pesawat di sana.
Ini benar-benar tampak 3D.
Ini berputar di semua tiga sumbu ada untuk memberikan kita bahwa
jenis dingin tidak hanya flip, baik sandal dan berputar terlihat.
Jadi ada kita pergi.
Dan juga di dalam halaman demo kami di sini, kami punya beberapa
transisi lainnya terjadi di yang kita miliki - seperti yang Anda lihat di
whiteboard, setiap saat kita memegang mouse kami atas salah satu dari
tag anchor tersebut dalam menu kami, dibutuhkan setengah detik untuk
transisi dari putih ke kuning dan kemudian kembali dari
kuning menjadi putih.
Agak dingin.
Juga, ini sistem menu keseluruhan didorong off transisi
seperti yang kita bicarakan dalam Nugget sebelumnya juga.
Kami transisi tinggi dan tingkat transparansi sehingga
menunjukkan dan terlihat seperti itu jatuh ke bawah ketika pengguna
memegang mouse-nya di atas salah satu item menu ini.
Mari kita lihat query media di sini.
Dan mari kita membuka halaman lain.
Aku punya di dalam halaman HTML folder kami di sini disebut
CSS_adaptive.
Sekarang ini sangat mirip dengan Nugget sebelumnya dimana jika saya
menunjukkan kepada Anda dalam browser di sini, kami memiliki header kita.
Kami memiliki konten nav kami di dalam semua duduk di dalam flexbox a,
dan kemudian kita memiliki footer kami.
Jadi perbedaan besar di sini adalah mereka mengambil semua barang-barang itu,
semua konten, yang kita miliki dalam hal ini hanya untuk tetap
sederhana dan mudah dan menjaga CSS kami minimal.
Tapi jadi apa yang akan terjadi di sini hanya untuk menunjukkan, jika kita
mengambil ini dan kami mengubah ukurannya ke bawah lebar 600 pixel, lihat
apa yang terjadi di sana?
Sekarang nav kami berada di atas, konten kami berada di tengah, dan
sisi kami di bawah.
Keren.
Dan jika kita mengambil ini lebih besar sedikit, ternyata kembali.
Jadi itulah permintaan media dalam tindakan.
Dan itu adalah hal yang benar-benar licin, dan semua dilakukan
melalui CSS.
Jadi mari kita lihat bagaimana kita melakukannya.
Dan itu cukup sederhana sebenarnya.
Jika kita kepala ke bawah sini, Anda dapat melihat saya memiliki
permintaan media yang mengatur.
Kita mulai dengan direktif Media.
Kemudian kita tentukan perangkat kita atau jenis kami.
Dan di sini, kita dapat mengatakan sesuatu seperti genggam jika kita hanya ingin
untuk menargetkan gaya ini di bawah sini terhadap perangkat genggam.
Dan kemudian kita dapat menambahkan kondisi bersama dengan tipe kami.
Dan ini adalah di mana kita bisa query seperti max
lebar layar.
Kita bisa melakukan resolusi di sini.
Kita bisa melakukan perangkat.
Ada banyak sifat yang berbeda yang dapat Anda gunakan
untuk kondisi Anda.
Dari sana itu hanya masalah pengaturan gaya Anda saat
semua kondisi tersebut adalah benar.
Dan untuk demo sederhana kami di sini, semua yang kita katakan adalah utama kami
div yang merupakan div yang flexbox kami dan membungkus dalam semua
daerah kami di sini, nav kami, konten kami, dan pihak kita.
Kami hanya mengubah jenis fleksibel untuk kolom dari baris.
Karena awalnya sini itu dibentuk -
di atas dalam CSS asli kita, itu ditetapkan sebagai baris.
Jadi itulah mengapa itu diatur seperti ini dalam tata letak baris.
Dan kemudian jika kita pergi di bawah 600 pixel pada
lebar, itu akan mengubahnya, ubah ke kolom.
Mengagumkan hal, dan mudah dilakukan.
Menjaga hal semacam ini di CSS daripada membuang-buang banyak
waktu melakukannya dalam JavaScript sangat besar.
Ini akan membuat banyak pengembang web bahagia.
Dalam CBT Nugget, kita belajar bagaimana untuk membuat animasi dan
user interface adaptif dengan CSS3.
Kami mulai dengan gambaran singkat di mana kami mendapat akrab
dengan transformasi, cara kita dapat memindahkan benda kami
dan elemen di sekitar halaman di nya x -, y -, dan jika kita berada di
3D, z - sumbu.
Kami juga mendapat akrab dengan transisi.
Kami melihat bahwa kita dapat menggunakan transisi untuk membuat
animasi.
Tapi pada dasarnya dengan cara yang kita dapat mengurangi atau meringankan
keluar dari satu gaya lain melalui
jangka waktu tertentu.
Kami juga mendapat akrab dengan pertanyaan media, cara yang bagus untuk
membuat output yang berbeda berdasarkan perangkat dan kondisi.
Dan kemudian kita melompat ke laboratorium Nugget virtual dan kami melihat
bagaimana semua hal ini bekerja.
Kami melihat beberapa transformasi dasar, transisi,
dan bagaimana kita bisa mengatur permintaan media untuk mengubah
menampilkan ketika kondisi tertentu adalah benar.
Saya berharap ini telah informatif untuk Anda, dan saya akan
mengucapkan terima kasih untuk melihat.