CSS-Animation: So erzielen Sie den Jitter-Effekt von Elementen-CSS-Tutorial-php.cn

CSS-Animation: So erzielen Sie den Jitter-Effekt von Elementen

王林

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

Original

1483 Leute haben es durchsucht

CSS-Animation: So erzielen Sie den Jitter-Effekt von Elementen

Zusammenfassung: CSS-Animation ist ein häufig verwendeter Effekt im Webdesign, der der Webseite ein dynamisches und lebendiges Gefühl verleihen kann. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS-Animationen den Jitter-Effekt von Elementen erzielen, und es werden spezifische Codebeispiele als Referenz beigefügt.

Einführung

Im Webdesign können Animationseffekte die Aufmerksamkeit der Benutzer erregen und die Interaktivität und Erfahrung der Benutzer mit Webseiten erhöhen. Unter anderem wird CSS-Animation als einfache und leichte Implementierungsmethode häufig im Webdesign verwendet.

Grundprinzipien der CSS-Animation

CSS-Animation wird durch Ändern des CSS-Eigenschaftswerts eines Elements erreicht. In CSS können Sie das Schlüsselwort @keyframes verwenden, um Schlüsselbilder zu definieren, und dann das Attribut animation verwenden, um die Dauer, Geschwindigkeit, Anzahl der Wiederholungen und andere Attribute des Schlüsselbilds anzugeben Animation. @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); }
}

Nach dem Login kopieren

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

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

示例代码如下：

.element {
  animation: shake 1s infinite;
}

Nach dem Login kopieren

完整的示例代码

<!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>

Nach dem Login kopieren

总结

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

@keyframes

animation

@keyframes

animation

Das obige ist der detaillierte Inhalt vonCSS-Animation: So erzielen Sie den Jitter-Effekt von Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!