给网站图片添加一个点击后抖动样式

在网页设计中，为用户交互增添一些微妙的动画效果，可以大大提升用户体验。今天，我们来介绍一种简单而有趣的效果：给网站图片添加一个点击后抖动样式。这种效果不仅能让页面显得更加生动，还能引导用户注意到被点击的图片。

实现步骤

1. 准备HTML结构

   首先，我们需要在HTML文件中插入一张图片。假设我们的图片文件名为image.jpg，HTML代码可能如下所示：

   <img src="image.jpg" alt="Sample Image" class="shake-on-click">

   这里，我们给图片添加了一个class属性，值为shake-on-click，以便后续通过CSS和JavaScript来定位这个元素。

2. 编写CSS样式

   接下来，我们在CSS文件中定义抖动效果的动画。我们可以使用@keyframes规则来创建一个名为shake的动画，它会让元素在水平方向上快速移动几次，模拟抖动的效果。

   @keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
   }
   
   .shake-on-click {
    display: inline-block;
    cursor: pointer;
   }
   
   .shake-on-click.shaking {
    animation: shake 0.5s;
   }

   在这里，.shake-on-click类用于设置图片的基本样式，如display: inline-block和cursor: pointer，以确保图片是行内块元素，并且鼠标悬停时显示为指针。.shake-on-click.shaking类则用于应用抖动动画，动画时长为0.5秒。

3. 添加JavaScript交互

   最后，我们需要通过JavaScript来监听图片的点击事件，并在点击时给图片添加shaking类，从而触发抖动动画。

   document.addEventListener('DOMContentLoaded', function() {
    var images = document.querySelectorAll('.shake-on-click');
   
    images.forEach(image) {       image.addEventListener('click', function() {
        this.classList.add('shaking');
        // 在动画结束后移除aking'类
        this.addEventListener('animationend', function() {
          this.classList.remove('shaking');
        });
      });
    });
   });

   这段JavaScript代码首先等待文档加载完成，然后选取所有带有shake-on-click类的图片元素。对于每张图片，它都添加了一个点击事件监听器。当图片被点击时，shaking类会被添加到图片的class属性中，从而触发抖动动画。同时，我们还添加了一个animationend事件监听器，用于在动画结束后移除shaking类，以便下次点击时能够再次触发动画。

通过以上步骤，我们就可以轻松实现给网站图片添加点击后抖动样式的效果。这种效果简单而有趣，能够为用户的浏览体验增添一抹亮色。