| 18.02.2016
CSS3 membuka kemungkinan tanpa had untuk pereka UI, dan kelebihan utama ialah hampir semua idea boleh dilaksanakan dengan mudah dan dihidupkan tanpa menggunakan JavaScript.
Sungguh mengagumkan bagaimana perkara mudah boleh menghidupkan halaman web biasa dan menjadikannya lebih mudah diakses oleh pengguna. Kita bercakap tentang peralihan CSS3, yang dengannya anda boleh membenarkan elemen mengubah dan menukar gaya, contohnya, pada tuding. Sembilan contoh animasi CSS3 yang tersedia di bawah akan membantu anda mencipta rasa responsif di tapak anda, serta menambah baik rupa keseluruhan halaman dengan peralihan yang cantik dan lancar.
Untuk maklumat lebih terperinci, anda boleh memuat turun arkib dengan fail.
Semua kesan berfungsi menggunakan sifat peralihan. peralihan- "peralihan", "transformasi") dan pseudo-class:hover, yang menentukan gaya elemen apabila kursor tetikus melayang di atasnya (dalam tutorial kami). Untuk contoh kami, kami menggunakan div 500x309 px, warna latar belakang awal #6d6d6d dan tempoh peralihan selama 0.3 saat.
Badan > div ( lebar: 500px; tinggi: 309px; latar belakang: #6d6d6d; -webkit-transition: semua 0.3s mudah;; -moz-transition: semua 0.3s mudah;; -o-transition: semua 0.3s mudah;; peralihan: semua 0.3s mudah; )
1. Tukar warna pada tuding
Suatu ketika dahulu, melaksanakan kesan sedemikian adalah kerja yang agak susah payah, dengan pengiraan matematik bagi nilai RGB tertentu. Sekarang sudah cukup untuk menulis gaya CSS di mana anda perlu menambah pseudo-class:hover ke pemilih dan tetapkan warna latar belakang yang lancar (dalam 0.3 saat) menggantikan warna latar belakang asal apabila anda menuding di atas blok:
Warna:legar (latar belakang:#53ea93; )
2. Rupa bingkai
Transformasi yang menarik dan menarik ialah bingkai dalaman yang kelihatan lancar apabila anda menuding tetikus. Sangat sesuai untuk menghias pelbagai butang. Untuk mencapai kesan ini, kami menggunakan pseudo-class:hover dan sifat box-shadow dengan parameter inset (menetapkan bayang di dalam elemen). Di samping itu, anda perlu menetapkan regangan bayang (dalam kes kami ialah 23px) dan warnanya:
Border:hover ( box-shadow: inset 0 0 0 23px #53ea93; )
3. Ayunan
Animasi CSS ini adalah pengecualian, kerana sifat peralihan tidak digunakan di sini. Sebaliknya kami menggunakan:
- @keyframes ialah arahan asas untuk mencipta animasi CSS bingkai demi bingkai, yang membolehkan anda melakukan apa yang dipanggil. papan cerita dan huraikan animasi sebagai senarai perkara utama;
- animasi dan kiraan lelaran animasi - sifat untuk menetapkan parameter animasi (tempoh dan kelajuan) dan bilangan kitaran (pengulangan). Dalam kes kami, ulangi 1.
4. Pengecilan
Kesan pudar pada asasnya ialah perubahan mudah dalam ketelusan sesuatu elemen. Animasi dibuat dalam dua peringkat: pertama anda perlu menetapkan keadaan ketelusan awal kepada 1 - iaitu, kelegapan lengkap, dan kemudian nyatakan nilainya apabila melayang tetikus - 0.6:
Pudar ( kelegapan: 1; ) .pudar: berlegar ( kelegapan: 0.6; )
Untuk hasil yang bertentangan, tukar nilai:
5. Pembesaran
Untuk menjadikan blok lebih besar apabila dituding ke atas, kami akan menggunakan sifat transform dan menetapkannya kepada skala(1.2) . Dalam kes ini, blok akan meningkat sebanyak 20 peratus sambil mengekalkan perkadarannya:
Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )
6. Pengurangan
Membuat elemen lebih kecil adalah semudah menjadikannya lebih besar. Jika dalam titik kelima untuk meningkatkan skala kami perlu menentukan nilai yang lebih besar daripada 1, maka untuk mengurangkan blok kami hanya akan menentukan nilai yang akan menjadi kurang daripada satu, sebagai contoh, skala(0.7) . Sekarang, apabila melayang tetikus, blok akan mengecut secara berkadar sebanyak 30 peratus daripada saiz asalnya:
Shrink:hover ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )
7. Transformasi menjadi bulatan
Salah satu animasi yang biasa digunakan ialah elemen segi empat tepat yang berubah menjadi bulatan apabila dilegarkan. Menggunakan sifat jejari sempadan CSS, digunakan bersama dengan :hover dan transition , ini boleh dicapai tanpa masalah:
Bulatan:tuding (jejari sempadan: 70%; )
8. Putaran
Pilihan animasi yang menyeronokkan ialah memutar elemen dengan bilangan darjah tertentu. Untuk melakukan ini, kita memerlukan sifat transformasi sekali lagi, tetapi dengan nilai yang berbeza - rotateZ(20deg) . Dengan parameter ini, blok akan diputar 20 darjah mengikut arah jam berbanding paksi Z:
Putar: hover ( -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); )
9. bayang 3D
Pendapat pereka berbeza sama ada kesan ini sesuai dalam reka bentuk rata. Walau bagaimanapun, animasi CSS3 ini agak asli dan juga digunakan pada halaman web. Kami akan mencapai kesan tiga dimensi menggunakan sifat bayang kotak yang sudah biasa (akan mencipta bayang berbilang lapisan) dan berubah dengan parameter translateX(-7px) (akan memastikan peralihan mendatar blok ke kiri sebanyak 7 piksel ):
Threed:hover ( box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93, 7px 7px #53ea93, 7px 7px; -transformer web -7px); transform: translateX(-7px); )
Sokongan penyemak imbas
Penyemak imbas berikut kini menyokong sifat peralihan:
| Pelayar desktop | |
|---|---|
| internet Explorer | Disokong oleh IE 10 dan ke atas |
| Chrome | Disokong dari versi 26 (sehingga versi 25 berfungsi dengan awalan -webkit-) |
| Firefox | Disokong daripada versi 16 (dalam versi 4-15 ia berfungsi dengan awalan -moz-) |
| Opera | Disokong daripada versi 12.1 |
| Safari | Disokong daripada versi 6.1 (dalam versi 3.1-6 ia berfungsi dengan awalan -webkit-) |
Sifat selebihnya yang digunakan dalam contoh ini, seperti transform , box-shadow , dsb., turut disokong oleh hampir semua penyemak imbas moden. Walau bagaimanapun, jika anda akan menggunakan idea ini untuk projek anda, kami amat mengesyorkan agar anda menyemak semula keserasian silang penyemak imbas.
Kami harap anda mendapati contoh animasi CSS3 ini membantu. Kami mendoakan kejayaan kreatif anda!
Untuk menganjurkan peningkatan sedemikian, saya mencadangkan dua cara. Kedua-duanya bersih CSS, tanpa guna JavaScript. Kaedah pertama membesarkan blok atau imej, bergantung pada apa yang anda akan gunakan kaedah ini, tanpa menjejaskan elemen halaman yang lain. Ia seolah-olah tumbuh di atas yang lain. Untuk mengatur peningkatan yang lancar, anda memerlukan:
1. Tentukan apakah elemen itu. Dalam kes kami, ini akan menjadi blok dengan kelas blok
2. Kami memaparkannya di tempat yang betul dalam kod html tapak kami
Dalam fail gaya kami menetapkan parameter berikut kepadanya:
Blok (lebar: 150px; tinggi: 150px; latar belakang:#f30; paparan: blok; kelegapan: 1; -webkit-transform: skala(1,1); -webkit-transition-timing-function: ease-out; -webkit -tempoh-peralihan: 550ms; -moz-transform: skala(1,1); -fungsi-masa-peralihan-moz: ease-out; -tempoh-transition-moz: 550ms; ) .block:hover ( -webkit- transform: skala(1.2,1.2); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 550ms; -moz-transform: scale(1.2,1.2); -moz-transition-timing- fungsi: ease-out; -moz-transition-template: 550ms; )
Anda boleh menyemak hasil siap. Tetapkan Lebar, Ketinggian, latar belakang dan parameter lain kepada apa sahaja yang anda mahu, perkara utama ialah menentukan parameter dengan betul -transformasi- bertanggungjawab untuk saiz peningkatan, dan anda hanya tidak perlu menyentuhnya dalam blok, ia adalah 1 secara lalai - saiz asal, tetapi dengan harta : berlegar kami menukarnya kepada saiz yang dikehendaki, kepada saiz peningkatan yang akan berlaku, dalam kes ini 1.2.
Sudah tentu, anda boleh mengubahnya sebaliknya, sebagai contoh, jika anda memerlukan penurunan yang lancar semasa melayang, tiada siapa yang akan melarang anda melakukan ini.
Harta seterusnya ialah -peralihan, bertanggungjawab untuk kelajuan animasi dalam milisaat. Jika anda tidak menggunakannya, semuanya akan meningkat dan berkurangan secara mendadak. Dalam contoh ini, nilai parameter ini ialah 550ms.
Kaedah kedua sedikit berbeza daripada yang pertama. Animasi dan peningkatannya berlaku dengan kesan pada blok dan elemen halaman yang lain. Apabila dibesarkan, ia seolah-olah memindahkannya ke sisi. Walau bagaimanapun, kaedah ini juga digunakan dan ramai yang memerlukannya untuk menyelesaikan masalah tertentu.
Jadi apakah yang perlu kita lakukan untuk mengatur zum pada tuding yang begitu lancar?
1. Seperti dalam contoh pertama, kita mentakrifkan blok dengan kelas sudah blok2
2. Sekali lagi kami memaparkannya di tempat yang betul
Dan tetapkan gaya kepadanya:
Block2( lebar: 150px; tinggi: 150px; latar belakang:#390; -webkit-transition: semua 2s mudah; -moz-transition: semua 2s mudah; -ms-transition: semua 2s mudah; -o-transition: semua 2s mudah ; peralihan: semua 2s mudah; ) .block2:hover ( lebar: 200px; tinggi: 200px; )
Dalam kes ini, kami hanya menukar saiz blok dalam piksel dan menambah harta -peralihan, yang menjadikan peningkatan lancar. Tidak seperti kaedah pertama, kami menentukan masa animasi bukan dalam milisaat, tetapi dalam beberapa saat. Dalam contoh, ini ialah 2 saat. Dengan cara mudah ini anda boleh membuat peningkatan yang lancar tanpa menggunakan skrip. Anda boleh bertahan dengan CSS tulen.
Versi lama penyemak imbas mungkin tidak memahami apa yang mereka mahu, jadi lihat sendiri. Secara peribadi, saya tidak memberi perhatian dan tidak bimbang tentang perkara buruk tentang fakta bahawa mungkin 1 dalam sejuta akan melawati tapak saya dari Internet Explorer purba dan lemah dan sesuatu tidak akan dipaparkan. Bagi pengguna sedemikian, saya memaparkan mesej bahawa sudah tiba masanya untuk mereka meninggalkan sampah dan beralih kepada pelayar manusia biasa.
Itu sahaja, terima kasih atas perhatian anda. 🙂
Kesan membesarkan imej apabila melayang kursor tetikus diketahui ramai. Tetapi bagaimana kita boleh membuatnya supaya hanya imej latar belakang diperbesarkan tanpa membesarkan kandungan utama elemen blok?
Mari buat elemen blok dengan lebar 340 piksel dan ketinggian 230 piksel.
Mari tentukan gaya untuknya:
Vozm (
lebar: 340px;
ketinggian:230px;
float:left;
limpahan: tersembunyi;
}
Jajar ke kiri - float:left. Kami juga menentukan sifat limpahan dengan nilai tersembunyi supaya imej latar belakang tidak melampaui kawasan blok kami.
Langkah seterusnya ialah meletakkan kandungan ke dalam elemen blok kami:
Teks 1
Vozm p (
warna:#da291c;
font-weight:bold;
saiz fon:16px;
ketinggian baris: 21px;
}
.vozm .red_bl (
lebar: 30px;
ketinggian:6px;
warna latar belakang:#da291c;
}
Tentukan warna teks untuk perenggan dalam elemen blok - warna dengan nilai #da291c. Kami juga menunjukkan bahawa teks akan menjadi tebal dengan saiz fon 16 piksel dan ketinggian garis 21 piksel.
Gaya "red_bl" akan menambah elemen merah mendatar yang bagus pada bekas blok kami. Lebar 30 pts, tinggi 6 pts, warnakan sama dengan teks.
Kami juga menambah gaya untuk blok dalaman:
Vposf (
jawatan:saudara;
z-indeks:9999;
kiri:45px;
atas:40px;
}
Kami menunjukkan kedudukan relatif blok dalaman dengan margin dalaman 45 mata di sebelah kiri dan 40 mata di atas.
Tambah imej latar belakang imej latar belakang:
Gaya untuknya kelihatan seperti ini:
kanak-kanak (
lebar: 100%;
ketinggian: 100%;
latar belakang-kedudukan: tengah;
saiz latar belakang: penutup;
-webkit-transition: semua .5s;
-moz-transition: semua .5s;
-o-peralihan: semua .5s;
peralihan: semua .5s;
}
Sifat peralihan untuk penyemak imbas yang berbeza digunakan untuk memastikan bahawa kesan peningkatan imej latar belakang pada tuding berlaku dengan lancar dalam masa 50 milisaat. Tetapkan lebar dan tinggi kepada 100%. Kami juga menetapkan kedudukan latar belakang (kedudukan latar belakang) di tengah dan skala imej (saiz latar belakang) kepada lebar dan ketinggian blok.
Vozm:hover.child,
.vozm:fokus .anak (
-ms-transform: skala (1.2);
-moz-transform: skala(1.2);
-o-transform: skala(1.2);
transform: skala (1.2);
}
Untuk melakukan ini, gunakan sifat transformasi dengan skala nilai. Peningkatan dibuat sebanyak 20% daripada yang asal.
Baiklah, mari muatkan latar belakang itu sendiri:
Bg-1 (imej latar belakang: url("/userf_fs/stati/fon_sh.jpg");margin-top: -59px;)
Memandangkan elemen blok dengan imej latar belakang berada di bawah teks kami, ia perlu dinaikkan. Untuk melakukan ini, gunakan nilai negatif untuk sifat atas margin.
Jadi kod html kelihatan seperti ini:
Teks 1
Dan css adalah seperti berikut:
Vozm (
lebar: 340px;
ketinggian:230px;
float:left;
limpahan: tersembunyi;
}
.anak(
lebar: 100%;
ketinggian: 100%;
latar belakang-kedudukan: tengah;
saiz latar belakang: penutup;
-webkit-transition: semua .5s;
-moz-transition: semua .5s;
-o-peralihan: semua .5s;
peralihan: semua .5s;
}
.vozm:hover .child,
.vozm:fokus .anak (
-ms-transform: skala (1.2);
-moz-transform: skala(1.2);
-webkit-transform: skala(1.2);
-o-transform: skala(1.2);
transform: skala (1.2);
}
.vozm p (
warna:#da291c;
font-weight:bold;
saiz fon:16px;
ketinggian baris: 21px;
}
.vozm .red_bl (
lebar: 30px;
ketinggian:6px;
warna latar belakang:#da291c;
}
..jpg");margin-top: -59px;)
.vposf (
jawatan:saudara;
z-indeks:9999;
kiri:45px;
atas:40px;
}
Jika kita meletakkan beberapa elemen blok berbanding satu sama lain, kita akan mendapat imej berikut.
Jadi, kami telah mencapai hasil yang diinginkan.
Amalan yang agak biasa di laman web moden adalah dengan lancar membesarkan blok dengan imej. Bagaimanakah anda boleh melakukan ini menggunakan CSS?
Zum imej licin pada CSS tuding
Kami membahagikan penyelesaian masalah kepada dua peringkat: penanda html dan gaya css. Mula-mula, mari tandakan blok dengan imej di dalamnya:
Semua blok telah diberikan kelas kotak. Salah satu sifat pentingnya akan melimpah: tersembunyi, iaitu, sembunyikan semua yang melampaui blok. Adakah kita akan memperbesarkan imej? ya. Tetapi hanya bahagian yang dihadkan oleh blok akan kelihatan.
Kami menyelesaikan perkara ini. Mari kita teruskan ke penerangan tentang gaya.
Kotak (
limpahan:tersembunyi;
lebar: 250px;
ketinggian:250px;
}
Segala-galanya adalah seperti yang dinyatakan - blok persegi, sama dengan saiz standard, tidak diperbesarkan imej, kemudian juga 250 oleh 250.
Harta limpahan:tersembunyi, seperti yang dinyatakan sebelum ini, tidak membenarkannya melangkaui sempadan blok apabila dizum masuk.
Sifat yang berkaitan dengan imej:
img kotak (
-moz-transition: all 1s ease-out;
-o-peralihan: semua 1s mudah keluar;
-webkit-transition: semua 1s memudahkan;
peralihan: semua 1s mudah keluar;
}
Kotak img: hover(
-webkit-transform: skala(1.2);
-moz-transform: skala(1.2);
-o-transform: skala(1.2);
transform: skala (1.2);
}
Tidak ada cara untuk mengatasinya tanpa CSS3. Semua pelayar moden akan memaparkan animasi. Anda memerlukan peralihan dan mengubah parameter. Kami menetapkan masa animasi kepada 1 saat (1s). Peningkatan akan menjadi 1.2 kali ganda. Anda boleh mengubahnya mengikut citarasa anda.
Sekarang sebagai contoh kerja!
Sudah tentu, terdapat banyak cara untuk membesarkan imej. Dan terutamanya penggunaan skrip dan pemalam digunakan. Pada pendapat saya, kaedah sedemikian adalah wajar dalam hal sumber dengan sejumlah besar gambar atau sebarang gambar. Blog saya tidak begitu. Dan, seperti biasa, saya mengikuti jalan yang paling sedikit menghabiskan masa, pengetahuan dan sumber di tapak saya.
Saya menawarkan anda cara untuk membesarkan imej di tapak web tanpa menggunakan sebarang skrip, tetapi secara eksklusif menggunakan html.
Kaedah membesarkan imej pada tapak web ini akan membolehkan pembaca melihat gambar dengan cepat, kerana tapak web anda tidak perlu memuatkan skrip tambahan.
Membesarkan imej di laman web
Kaedah 1 – besarkan imej pada tapak apabila menuding kursor
Cara yang sangat mudah, baik, cara yang paling mudah, jujur. Anda perlu menambah kod berikut pada sifat imej:
Onmouseover="this.style.width="px lebar imej besar"" onmouseout="this.style.width="px lebar imej kecil""
Apabila anda mengarahkan kursor tetikus, imej membesar.
Saya harap anda faham bahawa semua ini dilakukan dalam penyunting teks.
Kaedah 2 – besarkan imej pada tapak dengan mengklik tetikus
Kaedahnya adalah serupa, anda hanya perlu menggantikan onmouseover dengan onclick. Kod berikut ditambahkan pada sifat imej:
Style="width: "nilai lebar px imej kecil; sempadan:2px hitam pepejal;" onclick="this.style.width=px lebar imej besar"" onmouseout="this.style.width="px lebar imej kecil""
Ia akan kelihatan seperti ini sepenuhnya
Berikut adalah keputusan dan kod untuk gambar pussy.
Apabila anda mengklik tetikus, imej itu dibesarkan kepada saiz imej asal atau saiz yang anda tentukan. Untuk mengecilkan saiz, iaitu, kembalikan gambar kepada saiz asal, cuma klik di mana-mana sahaja pada halaman.
Saya harap anda tidak mendapati sukar untuk menggunakan kaedah sedemikian - menggunakan html - untuk membesarkan imej di tapak.
Secara umum, saya percaya bahawa ramai juruweb tidak mengehadkan diri mereka untuk hanya menggunakan mana-mana enjin dan menggunakan kod html di tapak mereka.
Baca juga:
27-10-2015T16:07:59+00:00 Harapan Skrip dan kod membesarkan imej pada tapak, membesarkan imej pada tapakSudah tentu, terdapat banyak cara untuk membesarkan imej. Dan terutamanya penggunaan skrip dan pemalam digunakan. Pada pendapat saya, kaedah sedemikian adalah wajar dalam hal sumber dengan sejumlah besar gambar atau sebarang gambar. Blog saya tidak begitu. Dan, seperti biasa, saya mengikuti jalan yang paling sedikit menghabiskan masa, pengetahuan dan sumber di tapak saya. Saya menawarkan anda cara untuk meningkatkan...
Nadezhda Trofimova [e-mel dilindungi] Laman Blog PentadbirAnda juga mungkin berminat dengan:
Kami mengalih keluar masukan kategori dari halaman utama dan RSS
Kami terus menambah baik fungsi dan penampilan tapak. Kami mengalih keluar siaran yang tidak perlu dari halaman utama dan RSS.
Serbuk roti di laman WordPress
Serbuk roti di laman web - apakah itu dan bagaimana untuk melakukannya?
Cara membuat bayangan teks dalam 5 minit
Hello, pembaca blog saya yang dikasihi. Dalam artikel ini anda akan belajar cara mencipta bayangan teks menggunakan gaya css dan kod html dalam masa 5 minit.
Cara membuat butang muat turun menggunakan kod css
Hello, pembaca blog saya yang dikasihi. Saya meneruskan topik butang. Artikel ini akan membincangkan cara membuat butang muat turun menggunakan kod css.
Bagaimana untuk membuat butang ke bawah untuk tapak web
