如何实现网页内图片点击后全屏闪烁/放大的交互效果

不需要引入第三方库，原生HTML+CSS+JS即可实现，逻辑完全匹配需求：点击图片后全屏展示、带闪烁效果、单次播放完成后自动回到页面初始状态，不会破坏原有页面布局。

核心实现逻辑 #

• 监听<body>范围内所有图片的点击事件，用事件委托写法兼容后续动态加载的图片
• 点击后动态插入固定定位的全屏遮罩层，将被点击的图片地址填入遮罩内的图片标签，撑满视口
• 给全屏图片绑定闪烁+放大的CSS动画，设置动画只播放1次
• 监听动画结束事件，直接移除整个全屏遮罩节点，页面自动恢复初始状态

可直接复用的代码示例 #

1. CSS样式（放到页面<style>标签内） #

/* 全屏遮罩层 */
.img-fullscreen-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
/* 全屏展示的图片 */
.img-fullscreen-mask img {
  max-width: 100%;
  max-height: 100%;
  animation: flashZoom 1.2s ease-in-out 1;
}
/* 闪烁+放大动画，可自行调整时长、闪烁频率 */
@keyframes flashZoom {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  25% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}

2. JS逻辑（放到页面</body>标签前） #

// 监听body内所有图片的点击事件
document.body.addEventListener('click', function(e) {
  // 仅当点击目标为图片时触发效果
  if (e.target.tagName.toLowerCase() === 'img') {
    const imgSrc = e.target.src;
    // 创建全屏遮罩节点
    const mask = document.createElement('div');
    mask.className = 'img-fullscreen-mask';
    // 创建全屏展示的图片节点
    const fullImg = document.createElement('img');
    fullImg.src = imgSrc;
    mask.appendChild(fullImg);
    document.body.appendChild(mask);

    // 动画播放完成后移除遮罩，恢复页面初始状态
    fullImg.addEventListener('animationend', function() {
      mask.remove();
    })
  }
})

自定义调整说明 #

• 修改animation: flashZoom 1.2s ease-in-out 1;中的1.2s参数，可以调整整个效果的总持续时长
• 调整@keyframes内各百分比节点的透明度、缩放值，可以自定义闪烁频率、图片放大幅度
• 修改.img-fullscreen-mask的background属性值，可以调整全屏层的背景效果，比如需要半透明背景可替换为rgba(0,0,0,0.9)

内容的提问来源于stack exchange，提问作者Zoheb Patel