Animasi CSS: Cara Mencapai Kesan Jitter Elemen-tutorial css-php.cn

Animasi CSS: Cara Mencapai Kesan Jitter Elemen

王林

Lepaskan： 2023-11-21 09:36:11

asal

1530 orang telah melayarinya

Animasi CSS: Cara Mencapai Kesan Jitter Elemen

Animasi CSS: Bagaimana untuk mencapai kesan kegelisahan unsur

Abstrak: Animasi CSS ialah kesan yang biasa digunakan dalam reka bentuk web, yang boleh menambah perasaan yang dinamik dan jelas pada halaman web. Artikel ini akan memperkenalkan cara menggunakan animasi CSS untuk mencapai kesan jitter elemen, dan melampirkan contoh kod khusus untuk rujukan.

Pengenalan

Dalam reka bentuk web, kesan animasi boleh menarik perhatian pengguna dan meningkatkan interaktiviti dan pengalaman pengguna dengan halaman web. Antaranya, animasi CSS, sebagai kaedah pelaksanaan yang mudah dan ringan, digunakan secara meluas dalam reka bentuk web.

Prinsip asas animasi CSS

Animasi CSS dicapai dengan menukar nilai sifat CSS sesuatu elemen. Dalam CSS, anda boleh menggunakan kata kunci @keyframes untuk mentakrifkan bingkai utama dan kemudian menggunakan atribut animasi untuk menentukan tempoh, kelajuan, bilangan ulangan dan atribut lain bagi animasi. @keyframes关键字定义关键帧，然后使用animation属性指定动画的持续时间、速度、重复次数等属性。

实现元素的抖动效果的基本思路

元素的抖动效果实际上是通过让元素快速地改变位置来模拟的。具体实现的步骤如下：

（1）定义抖动动画的关键帧

使用@keyframes关键字定义抖动动画的关键帧。关键帧包括起始状态和结束状态，通过在关键帧中指定元素的位置，使元素在指定的时间段内实现抖动效果。

示例代码如下：

@keyframes shake {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-10px, 0); }
  20% { transform: translate(10px, 0); }
  30% { transform: translate(-10px, 0); }
  40% { transform: translate(10px, 0); }
  50% { transform: translate(-10px, 0); }
  60% { transform: translate(10px, 0); }
  70% { transform: translate(-10px, 0); }
  80% { transform: translate(10px, 0); }
  90% { transform: translate(-10px, 0); }
  100% { transform: translate(0, 0); }
}

Salin selepas log masuk

（2）为元素添加动画属性

使用animation属性为元素添加动画属性，并指定动画的名称、持续时间、重复次数等属性。

示例代码如下：

.element {
  animation: shake 1s infinite;
}

Salin selepas log masuk

完整的示例代码

<!DOCTYPE html>
<html>
<head>
  <style>
    @keyframes shake {
      0% { transform: translate(0, 0); }
      10% { transform: translate(-10px, 0); }
      20% { transform: translate(10px, 0); }
      30% { transform: translate(-10px, 0); }
      40% { transform: translate(10px, 0); }
      50% { transform: translate(-10px, 0); }
      60% { transform: translate(10px, 0); }
      70% { transform: translate(-10px, 0); }
      80% { transform: translate(10px, 0); }
      90% { transform: translate(-10px, 0); }
      100% { transform: translate(0, 0); }
    }

    .element {
      animation: shake 1s infinite;
    }
  </style>
</head>
<body>
  <div class="element">抖动效果</div>
</body>
</html>

Salin selepas log masuk

总结

CSS动画是一种简单、轻量级的实现动画效果的方式，通过使用@keyframes关键字和animation

@keyframes

animasi

@keyframes

animasi

Atas ialah kandungan terperinci Animasi CSS: Cara Mencapai Kesan Jitter Elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!