要实现两个图像的动画同时进入和退出,你可以使用CSS动画或者JavaScript来控制。以下是使用CSS动画的一个基本示例:
<!DOCTYPE html>
<html lang="en">
<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="container">
<img src="image1.jpg" alt="Image 1" class="animated-image">
<img src="image2.jpg" alt="Image 2" class="animated-image">
</div>
</body>
</html>
/* styles.css */
.container {
position: relative;
width: 100%;
height: 100vh;
}
.animated-image {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.container:hover .animated-image {
opacity: 1;
}
在这个例子中,当鼠标悬停在.container
上时,两个图像会同时变得可见(opacity从0变为1),实现了同时进入动画。同样,当鼠标离开.container
时,两个图像会同时变得不可见(opacity从1变为0),实现了同时退出动画。
如果你需要更复杂的控制,比如同时开始和结束动画,你可以使用JavaScript来添加和移除类名,从而触发动画。
// script.js
document.addEventListener('DOMContentLoaded', function() {
const container = document.querySelector('.container');
const images = document.querySelectorAll('.animated-image');
container.addEventListener('mouseenter', function() {
images.forEach(image => image.classList.add('animate-in'));
});
container.addEventListener('mouseleave', function() {
images.forEach(image => image.classList.remove('animate-in'));
});
});
/* styles.css */
.animated-image.animate-in {
animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
在这个JavaScript示例中,当鼠标进入.container
时,会为每个图像添加animate-in
类,触发CSS动画。当鼠标离开时,移除这个类,动画结束。
这种同步动画效果可以用于网页设计中的图片轮播、幻灯片展示、产品展示页面等,以增强视觉效果和用户体验。
will-change
属性)、减少不必要的DOM操作或者使用Web Animations API来提高性能。通过上述方法,你可以实现两个图像的同步动画效果,并根据需要调整动画的细节。
领取专属 10元无门槛券
手把手带您无忧上云