图片黑白变彩色动画

原创已于 2025-06-27 13:23:56 修改 · 607 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-07 15:52:52 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片黑白变彩色动画</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
padding: 20px;
}

h1 {
color: #333;
margin-bottom: 30px;
text-align: center;
}

.image-container {
position: relative;
width: 500px;
height: 350px;
margin: 0 auto;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
border-radius: 8px;
}

.image-wrapper {
position: relative;
width: 100%;
height: 100%;
}

.image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 2s ease-in-out;
}

.bw-image {
filter: grayscale(100%);
z-index: 2;
opacity: 1;
}

.color-image {
z-index: 1;
opacity: 0;
}

.animate .bw-image {
opacity: 0;
}

.animate .color-image {
opacity: 1;
}

.controls {
margin-top: 30px;
display: flex;
gap: 15px;
}

button {
padding: 10px 20px;
background-color: #4a90e2;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}

button:hover {
background-color: #3a7bc8;
}

.info {
margin-top: 30px;
text-align: center;
color: #666;
}

.info a {
color: #4a90e2;
text-decoration: none;
}

.info a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>图片黑白变彩色动画效果</h1>

<div class="image-container">
<div class="image-wrapper" id="imageWrapper">
<img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" alt="彩色图片" class="image color-image">
<img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" alt="黑白图片" class="image bw-image">
</div>
</div>

<div class="controls">
<button id="animateBtn">开始动画</button>
<button id="resetBtn">重置效果</button>
</div>

<div class="info">
</div>

<script>
const imageWrapper = document.getElementById('imageWrapper');
const animateBtn = document.getElementById('animateBtn');
const resetBtn = document.getElementById('resetBtn');

animateBtn.addEventListener('click', function() {
imageWrapper.classList.add('animate');
});

resetBtn.addEventListener('click', function() {
imageWrapper.classList.remove('animate');
});

// 自动开始动画（可选）
setTimeout(() => {
imageWrapper.classList.add('animate');
}, 1000);
</script>
</body>
</html>