Sekarang mari kita tambahkan perubahan halus pada warna font:

a.foo (padding: 5px 10px; background: # 69f; warna: # 000; -webkit-transition: background 0.5s ease, color 0.3s ease;) a.foo:hover (latar belakang: #33f; warna: #fff ;)

Pada mouseover, kode ini akan dengan lancar mengubah warna latar belakang selama setengah detik dan warna font selama 0,3 detik. Jika kita menginginkan properti yang sama untuk semua elemen, kita dapat mengganti
-webkit-transisi: kemudahan latar belakang 0,5 detik;
-webkit-transisi: kemudahan warna 0,3 detik;

di
-webkit-transisi: semua kemudahan 0,5 detik;

Sekarang efek Transisi akan diterapkan ke semua properti yang berubah pada acara dan dengan parameter yang sama - 0,5 detik, efek kemudahan.

Kami juga dapat menambahkan penundaan untuk efeknya:

a.foo (padding: 5px 10px; latar belakang: # 69f; warna: # 000; -webkit-transition: semua 0.5s mudah; -webkit-transition-delay: 0.5s;) a.foo:hover (latar belakang: #33f ; warna: #ff;)

Sekarang animasi kita akan berjalan setengah detik setelah mouse melayang.

Anda dapat menerapkan properti transisi ke apa saja - latar belakang, warna, panjang, ukuran font, dll. Pada dasarnya, ini adalah properti yang menentukan warna atau properti yang dapat dinyatakan dalam satuan panjang (px, em, ex) atau sebagai persentase. Kita juga bisa menggunakan: focus dan: active pseudo-classes sebagai event. Secara umum, Anda dapat menggunakan transisi dengan pemilih apa pun.

Sebuah tugas

Larutan

Warna tautan diatur melalui properti warna, yang ditambahkan ke pemilih A. Kelas pseudo: hover digunakan untuk mengubah warna tautan saat kursor mouse melayang di atasnya, dan untuk membuat warna berubah dengan lancar, tambahkan properti transisi ke pemilih A, yang nilainya adalah waktu. Biasanya ditunjukkan dalam detik atau milidetik.

Contoh 1. Mengubah warna tautan

Merakit megadroid membutuhkan membuka kotak, mengeluarkan kantong keripik dan melipatnya dalam urutan yang benar menggunakan manual 8631 halaman terperinci kami.

Dalam contoh ini, untuk kejelasan, warna kontras dipilih dan waktu transisi diatur ke satu detik. Di lokasi kerja, sebaiknya atur waktu menjadi kurang, 0,6 detik atau lebih. Jadi pilihlah nilainya sesuai selera dan keinginan Anda.

Hari ini kita akan mengetahui cara membuatnya perubahan warna blok halus dari menggunakan CSS dan jQuery... Dengan plugin ini, Anda dapat mencapai hasil desain yang luar biasa indah. Misalnya, Anda dapat membuat menu keren yang akan berubah warna dengan mulus saat dilayangkan, dan percayalah, tampilannya sangat bagus.

JQuery

Pertama, di antara tag dan Anda perlu meletakkan yang berikut ini:

Kemudian lagi di antara tag dan salin skrip ini di sini:

Di mana .Kotak - ini adalah kelas blok yang kami buat di atas dalam CSS.

"#FF4500"- warna pada hover. 400 - Kecepatan animasi saat melayang.

"#ffffff"- warna asli setelah memindahkan kursor. 400 - Kecepatan animasi saat menggerakkan kursor.

html

Setelah Anda melakukan semuanya seperti yang dijelaskan di atas, warna blok akan berubah dengan lancar... Untuk menyisipkan blok seperti itu pada halaman, Anda hanya perlu menambahkan yang berikut ini di tempat yang tepat:

Dan blok akan muncul.

Penting

Plugin ini hanya dapat mengubah warna latar belakang. Misalnya, Anda tidak akan dapat melampirkannya ke tautan atau teks. Warna tautan diubah oleh plugin lain (saya pasti akan segera menulis cara melakukannya).

Jika Anda ingin membuat blok pada halaman memiliki warna yang berbeda, seperti pada saya, Anda perlu di antara tag dan letakkan beberapa skrip dalam satu baris dan, karenanya, jangan lupa untuk mengubah warna menjadi yang diinginkan. Yang paling penting adalah mengubah kelas, misalnya, dalam contoh kita di atas, kelas Kotak dan skrip berikut harus dengan kelas yang berbeda seperti Kotak1, kemudian Kotak2 dll.

Itu saja, teman-teman... Jika Anda tidak mengerti apa-apa, pastikan untuk bertanya di komentar. Sampai berjumpa lagi.

Dalam pelajaran ini, kita akan berbicara tentang efek di mana latar belakang suatu objek berubah dengan mulus sebagai akibat dari mengarahkan kursor mouse ke atasnya.
Pada awalnya, karena Anda mungkin sudah terbiasa (jika ini bukan pertama kalinya Anda menggunakan jQuery perpustakaan), sambungkan jQuery di dalam situs kami.
Dengan sendirinya jQuery, Kami juga butuh jQuery UI.

Jika Anda terbiasa dengan prinsip-prinsip jQuery, maka kita harus ingat bahwa di header kita harus meletakkan kode panggilan, di kasus ini, menganimasikan perubahan warna sehingga dimuat sebelum konten halaman utama dimuat. $ (document) .ready (function () (// masukkan kode panggilan animasi Anda di sini));

html

Berikut adalah contoh markupnya html.

Mengubah warna latar belakang suatu elemen

Animasi perubahan warna saat melayang

/ Game PC / Portal 2

Portal 2

Portal asli sudah menjadi hal yang kultus dan tidak terduga pada masanya. Ini hanya sekali lagi menegaskan tesis berabad-abad tentang kemenangan ide-ide atas teknologi maju.

CSS

Penataan CSS untuk halaman kita terlihat seperti ini.

png); perataan teks: kiri; warna: #333; lebar: 800 piksel; ukuran font: 14px; font-family: georgia, "time new romans", serif; margin: 0 otomatis; bantalan: 0; ) a (color: #333; text-decoration: none) a: focus (outline: none;) h1 (ukuran font: 34px; font-family: verdana, helvetica, arial, sans-serif; spasi huruf: - 2px; warna: #394BEA; font-weight: 700; padding: 20px 0 0; text-shadow: 0 1px 1px # 70C5ED;) h2 (ukuran font: 24px; font-family: verdana, helvetica, arial, sans- serif; warna: # 5C81CB; font-weight: 400; padding: 0 0 10px; text-shadow: 0 1px 1px # 70C5ED;) h3, h3 a (ukuran font: 14px; font-family: verdana, helvetica, arial , sans-serif; spasi huruf: -1px; warna: #333; berat font: 700; transformasi teks: huruf besar; margin: 0; padding: 8px 0 8px 0;) p (warna: #333; float: kiri; tinggi garis: 22px; margin: 5px; padding: 0 0 10px;) #container (margin: 0; padding: 0;) .boxes (background: #fff; border: 1px solid #ccc; float: left; padding: 10px; posisi: relatif; lebar: 600px;) img (border: 5px solid #CCCCCC;) div.info (border-bottom: 1px solid #CCCCCC; float: left; margin: 0; padding: 0; lebar: 100% ;) .block (colo r: #0066CC; mengapung: kiri; melimpah: tersembunyi; posisi: relatif; lebar: 600 piksel; ) .block h4, .block h4 a (warna: # 333333; ukuran font: 11px; padding: 5px 0; text-shadow: 0 1px 1px #CEDEFD; text-transform: huruf besar;)

Js

DIV elemen yang memiliki kelas .kotak- adalah elemen, blok, di mana kita ingin mengubah warna.
Kami akan memanggil kode ini di header.

$ (dokumen) .ready (fungsi () ($ (". kotak"). hover (fungsi () ($ (ini) .stop (). animate ((backgroundColor: "# 40B8FE"), 800);), function() ($(ini) .stop().animate((backgroundColor: "#ffffff"), 800);));)); Dalam parameter warna latar belakang warna diatur dan nilainya 800 adalah kecepatan animasi.