使用CSS 和 JavaScript 实现鼠标悬停时图片放大、缩小和抖动

embedded/2025/1/2 5:46:36/

我们可以通过 CSS 和 JavaScript 来实现鼠标悬停时图片放大、缩小和抖动的效果。以下是一个简单的实现方式：

1.HTML 结构

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠标悬停效果</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="image-container"><img src="your-image.jpg" alt="Image" class="hover-image"></div><script src="script.js"></script>
</body>
</html>

2.CSS 样式

css">/* 基本样式 */
.image-container {display: inline-block;position: relative;overflow: hidden;
}.hover-image {width: 100%;transition: transform 0.3s ease, filter 0.1s ease;
}/* 鼠标悬停时的放大和抖动效果 */
.image-container:hover .hover-image {transform: scale(1.2) rotate(5deg); /* 放大并轻微旋转 */animation: shake 0.5s ease-in-out infinite;
}/* 抖动动画 */
@keyframes shake {0% {transform: scale(1.2) rotate(5deg) translateX(0);}25% {transform: scale(1.2) rotate(5deg) translateX(-5px);}50% {transform: scale(1.2) rotate(5deg) translateX(5px);}75% {transform: scale(1.2) rotate(5deg) translateX(-5px);}100% {transform: scale(1.2) rotate(5deg) translateX(0);}
}

3.JavaScript (可选)

const image = document.querySelector('.hover-image');image.addEventListener('mouseenter', () => {image.classList.add('hover');
});image.addEventListener('mouseleave', () => {image.classList.remove('hover');
});

说明：

放大效果：使用 transform: scale(1.2) 来放大图片。你可以根据需要调整放大的比例。
抖动效果：使用 @keyframes 定义了一个简单的抖动动画，通过 translateX 来实现图片左右的抖动。
旋转效果：rotate(5deg) 给图片添加了一个微小的旋转效果，增加视觉动感。
这个效果会在鼠标悬停时使图片放大、抖动，并且在鼠标离开时恢复到原样。