Petua dan kaedah menggunakan CSS untuk mencapai kesan jitter apabila tetikus melayang

Petua dan kaedah menggunakan CSS untuk mencapai kesan kegelisahan apabila tetikus melayang

Kesan kegelisahan apabila tetikus melayang boleh menambah sedikit dinamik dan minat pada halaman web dan menarik perhatian pengguna. Dalam artikel ini, kami akan memperkenalkan beberapa teknik dan kaedah menggunakan CSS untuk mencapai kesan jitter hover tetikus, dan memberikan contoh kod khusus.

Prinsip jitter

Dalam CSS, kita boleh menggunakan animasi keyframe (keyframe) dan mengubah sifat untuk mencapai kesan jitter. Animasi keyframe membolehkan kami mentakrifkan urutan animasi untuk mencipta kesan animasi dengan menukar nilai sifat elemen pada titik masa yang berbeza. Atribut transformasi boleh menukar putaran, penskalaan, terjemahan dan atribut lain elemen untuk mencapai kesan kegelisahan.

Contoh kod pelaksanaan

Berikut ialah contoh pelaksanaan mudah bagi kesan dithering:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: shake 1s infinite;
}

@keyframes shake {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-5px, 0);
  }
  50% {
    transform: translate(5px, 0);
  }
  75% {
    transform: translate(-5px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

Dalam kod di atas, kami mula-mula mencipta elemen bernama kotak dan menetapkan lebar, ketinggian dan warna latar belakangnya. Kemudian, gunakan animasi goncang pada elemen kotak melalui atribut animasi, dan tentukan tempoh animasi menjadi 1 saat dan mainkannya berulang kali (tak terhingga). Seterusnya, animasi kerangka utama bernama goncang ditakrifkan melalui kata kunci @keyframes. Dalam animasi goncang, kami mencapai kesan gegaran dengan menukar nilai terjemah atribut transformasi elemen. Dalam proses dari 0% hingga 100%, elemen akan bergoyang ke depan dan ke belakang dalam arah mendatar.

Laraskan kesan jitter

Jika anda ingin melaraskan amplitud dan kelajuan jitter, anda boleh membuat beberapa pengubahsuaian pada contoh kod. Sebagai contoh, anda boleh menukar nilai terjemah untuk menukar jarak anjakan elemen, dengan itu menukar amplitud jitter. Anda juga boleh melaraskan tempoh animasi untuk menukar kelajuan jitter.

Selain itu, anda boleh menambah lebih banyak bingkai utama pada kesan jitter untuk mencipta kesan animasi yang lebih kompleks. Sebagai contoh, anda boleh menambah kesan putaran pada bingkai utama 25% dan 75% supaya elemen itu bergegar dan berputar pada masa yang sama. Dengan melaraskan peratusan kerangka utama dan nilai atribut, anda boleh mencipta kesan dithering yang unik dan menarik mengikut keperluan anda.

Nota

Apabila menggunakan kesan jitter hover tetikus, anda juga perlu memberi perhatian kepada beberapa butiran.

Pertama sekali, adalah disyorkan untuk membuat pelarasan penggayaan yang sesuai pada elemen yang diterbangkan untuk menjadikannya lebih menarik perhatian dan mudah dikenal pasti. Anda boleh menukar warna latar belakang elemen, gaya jidar atau menambah kesan bayang untuk meningkatkan kesan visual kesan dithering.

Kedua, kesan jitter hover tetikus mungkin mempunyai kesan tertentu pada pengalaman pengguna. Oleh itu, apabila menggunakan kesan dithering, pastikan bahawa frekuensi dan amplitud dithering tidak terlalu dibesar-besarkan untuk mengelakkan mengganggu operasi biasa pengguna.

Akhir sekali, perlu diingatkan bahawa tidak semua penyemak imbas menyokong animasi kerangka kunci CSS dan mengubah sifat. Oleh itu, apabila menggunakan ciri ini, adalah idea yang baik untuk menjalankan ujian keserasian untuk memastikan kesan dithering dipaparkan dengan betul merentas pelayar dan peranti yang berbeza.

Kesimpulan

Artikel ini memperkenalkan teknik dan kaedah menggunakan CSS untuk mencapai kesan jitter apabila tetikus melayang, dan menyediakan contoh kod khusus. Dengan memahami penggunaan animasi keyframe dan atribut transform, anda boleh mencipta kesan jitter yang unik dan menarik dengan mudah untuk menambah pergerakan dan minat pada halaman web anda. Saya harap artikel ini membantu anda, dan saya berharap anda mendapat hasil yang baik apabila menggunakan kesan jitter over mouse!

Atas ialah kandungan terperinci Petua dan kaedah menggunakan CSS untuk mencapai kesan jitter apabila tetikus melayang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!