Étapes pour implémenter l'effet d'entraînement de l'eau lors d'un clic de souris en utilisant du CSS pur

Les étapes pour implémenter l'effet d'ondulation de l'eau du clic de souris à l'aide de CSS pur nécessitent des exemples de code spécifiques

L'effet d'ondulation de l'eau du clic de souris est l'un des effets interactifs courants dans le développement Web, et il peut apporter une expérience plus vivante aux utilisateurs. . Dans cet article, nous expliquerons comment obtenir cet effet en utilisant du CSS pur et fournirons des exemples de code spécifiques.

Les étapes d'implémentation sont les suivantes :

Étape 1 : Structure HTML

Tout d'abord, créez un élément avec un effet de clic de souris dans le fichier HTML. Vous pouvez utiliser un élément <div> comme conteneur et définir un nom de classe pour le style en CSS. <code><div>元素作为容器，并设置一个类名，以便在CSS中进行样式设置。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'>&lt;div class=&quot;ripple-container&quot;&gt; &lt;button class=&quot;ripple-button&quot;&gt;Click me&lt;/button&gt; &lt;/div&gt;</pre><div class="contentsignin">Copier après la connexion</div></div><p>步骤2：CSS样式设置</p><p>接下来，在CSS文件中设置<code>ripple-container和ripple-button类的样式。我们将ripple-container类设置为相对定位，用于容纳水波纹效果。同时，ripple-button类应设置为绝对定位，以确保效果在按钮内部展示。

.ripple-container {
  position: relative;
  display: inline-block;
}

.ripple-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 24px;
  background-color: #44a1ff;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

步骤3：定义水波纹效果

使用::after伪元素和animation属性来定义水波纹效果。我们将水波纹设置为圆形，并设置动画效果为从内到外逐渐扩大。另外，我们还需要设置水波纹的颜色和持续时间。

.ripple-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  animation: rippleEffect 1s ease-out;
}

@keyframes rippleEffect {
  0% {
    width: 0;
    height: 0;
    opacity: 0.4;
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}

步骤4：绑定点击事件

最后，在JavaScript文件中为按钮元素绑定点击事件。当鼠标点击按钮时，将添加一个.ripple

const button = document.querySelector('.ripple-button');

button.addEventListener('click', function(e) {
  // 只有当水波纹动画结束后，我们才会添加动画类
  if (!button.classList.contains('ripple')) {
    button.classList.add('ripple');
    setTimeout(function(){
      button.classList.remove('ripple');
    }, 1000);
  }
});

Étape 2 : Style CSS

Ensuite, définissez les styles des classes ripple-container et ripple-button dans le fichier CSS. Nous définissons la classe ripple-container sur un positionnement relatif pour s'adapter à l'effet d'entraînement de l'eau. Dans le même temps, la classe ripple-button doit être définie sur un positionnement absolu pour garantir que l'effet est affiché à l'intérieur du bouton.

rrreee

Étape 3 : Définir l'effet d'entraînement de l'eau🎜🎜Utilisez le pseudo-élément ::after et l'attribut animation pour définir l'effet d'entraînement de l'eau. Nous définissons l'ondulation de l'eau pour qu'elle soit circulaire et l'animons pour qu'elle s'étende progressivement de l'intérieur vers l'extérieur. De plus, nous devons également définir la couleur et la durée des ondulations de l’eau. 🎜rrreee🎜Étape 4 : Liez l'événement click 🎜🎜Enfin, liez l'événement click à l'élément bouton dans le fichier JavaScript. Lorsque la souris clique sur le bouton, une classe .ripple sera ajoutée pour déclencher l'effet d'entraînement de l'eau. 🎜rrreee🎜À ce stade, nous avons terminé toutes les étapes pour obtenir l'effet d'entraînement de l'eau sur les clics de souris en utilisant du CSS pur. En ajoutant le code ci-dessus et en ouvrant le fichier HTML dans le navigateur, cliquez sur le bouton pour voir l'affichage de l'effet d'ondulation de l'eau lorsque la souris clique. 🎜🎜J'espère que cet article vous aidera à obtenir l'effet d'ondulation de l'eau lorsque vous cliquez sur la souris. Si vous avez des questions ou des doutes, n'hésitez pas à nous faire part de vos commentaires. Merci d'avoir lu ! 🎜