Animation CSS : comment obtenir l'effet de gigue des éléments-tutoriel CSS-php.cn

Animation CSS : comment obtenir l'effet de gigue des éléments

王林

Libérer： 2023-11-21 09:36:11

original

1548 Les gens l'ont consulté

Animation CSS : comment obtenir leffet de gigue des éléments

Animation CSS : Comment obtenir l'effet de gigue des éléments

Résumé : L'animation CSS est un effet couramment utilisé dans la conception Web, qui peut ajouter une sensation dynamique et vivante à la page Web. Cet article expliquera comment utiliser l'animation CSS pour obtenir l'effet de gigue des éléments et joindra des exemples de code spécifiques pour référence.

Introduction

Dans la conception Web, les effets d'animation peuvent attirer l'attention des utilisateurs et augmenter l'interactivité et l'expérience des utilisateurs avec les pages Web. Parmi eux, l'animation CSS, en tant que méthode de mise en œuvre simple et légère, est largement utilisée dans la conception Web.

Principes de base de l'animation CSS

L'animation CSS est obtenue en modifiant la valeur de la propriété CSS d'un élément. En CSS, vous pouvez utiliser le mot-clé @keyframes pour définir les images clés, puis utiliser l'attribut animation pour spécifier la durée, la vitesse, le nombre de répétitions et d'autres attributs de l'image. 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); }
}

Copier après la connexion

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

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

示例代码如下：

.element {
  animation: shake 1s infinite;
}

Copier après la connexion

完整的示例代码

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

Copier après la connexion