CSS3鼠标滑过时图片跳跃一下
作者：庄泽峰 / 2023-12-7 17:07
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 100px;
height: 120px;
overflow: hidden;
}
.image {
width: 100%;
height: 100%;
}
.jump-animation {
animation: jump 0.5s;
}
@keyframes jump {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
</style>
<script>
function addJumpAnimation() {
var image = document.getElementById("image");
image.classList.add("jump-animation");
}
function removeJumpAnimation() {
var image = document.getElementById("image");
image.classList.remove("jump-animation");
}
</script>
</head>
<body>
<div class="container">
<img id="image" class="image" src="https://phoncent.com/content/plugins/qiqi/qiqi.png" alt="Your Image" onmouseover="addJumpAnimation()" onmouseout="removeJumpAnimation()">
</div>
</body>
</html>
