HTML 手风琴图像库下载特效

原创已于 2025-06-27 15:25:29 修改 · 791 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-01 12:14:24 首次发布

<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #1a1a2e, #16213e);
color: #fff;
min-height: 100vh;
overflow-x: hidden;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}

h1 {
text-align: center;
margin-bottom: 40px;
font-size: 2.8em;
color: #e94560;
text-shadow: 0 0 15px rgba(233, 69, 96, 0.5);
}

.accordion-gallery {
display: flex;
height: 500px;
gap: 10px;
}

.accordion-item {
position: relative;
flex: 1;
border-radius: 20px;
overflow: hidden;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.accordion-item.active {
flex: 5;
}

.accordion-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}

.accordion-item:hover img {
transform: scale(1.05);
}

.item-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
padding: 30px 20px;
opacity: 0;
transition: opacity 0.3s ease;
}

.accordion-item.active .item-overlay {
opacity: 1;
}

.item-title {
font-size: 1.8em;
margin-bottom: 10px;
color: #fff;
transform: translateY(20px);
transition: transform 0.3s ease;
}

.accordion-item.active .item-title {
transform: translateY(0);
}

.item-desc {
color: #ddd;
margin-bottom: 15px;
transform: translateY(20px);
transition: transform 0.3s ease 0.1s;
opacity: 0;
}

.accordion-item.active .item-desc {
transform: translateY(0);
opacity: 1;
}

.download-btn {
display: inline-block;
padding: 8px 20px;
background-color: #e94560;
color: white;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease;
transform: translateY(20px);
opacity: 0;
transition: transform 0.3s ease 0.2s, opacity 0.3s ease 0.2s, background 0.3s ease;
}

.accordion-item.active .download-btn {
transform: translateY(0);
opacity: 1;
}

.download-btn:hover {
background-color: #ff6b6b;
box-shadow: 0 0 15px rgba(233, 69, 96, 0.5);
}

.download-btn i {
margin-right: 8px;
}

.credit {
text-align: center;
margin-top: 50px;
color: #777;
font-size: 0.9em;
}

.credit a {
color: #e94560;
text-decoration: none;
transition: color 0.3s ease;
}

.credit a:hover {
color: #ff6b6b;
}

@media (max-width: 768px) {
.accordion-gallery {
flex-direction: column;
height: auto;
}

.accordion-item {
height: 100px;
}

.accordion-item.active {
height: 400px;
}

h1 {
font-size: 2em;
}
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="container">
<h1>手风琴图像画廊</h1>

<div class="accordion-gallery">
<div class="accordion-item active">
<img src="https://source.unsplash.com/random/800x600?mountain=1" alt="山脉风景">
<div class="item-overlay">
<h3 class="item-title">壮丽山脉</h3>
<p class="item-desc">探索世界最高峰和最美山脉的壮丽景色</p>
<a href="#" class="download-btn" data-img="https://source.unsplash.com/random/800x600?mountain=1">
<i class="fas fa-download"></i>下载图片
</a>
</div>
</div>

<div class="accordion-item">
<img src="https://source.unsplash.com/random/800x600?ocean=1" alt="海洋景观">
<div class="item-overlay">
<h3 class="item-title">深邃海洋</h3>
<p class="item-desc">感受蓝色星球的深邃与神秘</p>
<a href="#" class="download-btn" data-img="https://source.unsplash.com/random/800x600?ocean=1">
<i class="fas fa-download"></i>下载图片
</a>
</div>
</div>

<div class="accordion-item">
<img src="https://source.unsplash.com/random/800x600?forest=1" alt="森林景观">
<div class="item-overlay">
<h3 class="item-title">神秘森林</h3>
<p class="item-desc">探索地球上最后的原始森林秘境</p>
<a href="#" class="download-btn" data-img="https://source.unsplash.com/random/800x600?forest=1">
<i class="fas fa-download"></i>下载图片
</a>
</div>
</div>

<div class="accordion-item">
<img src="https://source.unsplash.com/random/800x600?desert=1" alt="沙漠景观">
<div class="item-overlay">
<h3 class="item-title">金色沙漠</h3>
<p class="item-desc">体验地球上最极端环境之一的壮美</p>
<a href="#" class="download-btn" data-img="https://source.unsplash.com/random/800x600?desert=1">
<i class="fas fa-download"></i>下载图片
</a>
</div>
</div>

<div class="accordion-item">
<img src="https://source.unsplash.com/random/800x600?city=1" alt="城市景观">
<div class="item-overlay">
<h3 class="item-title">现代都市</h3>
<p class="item-desc">欣赏人类文明最璀璨的结晶</p>
<a href="#" class="download-btn" data-img="https://source.unsplash.com/random/800x600?city=1">
<i class="fas fa-download"></i>下载图片
</a>
</div>
</div>
</div>

<div class="credit">

</div>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
// 手风琴效果
$('.accordion-item').on('click', function() {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});

// 下载功能
$('.download-btn').on('click', function(e) {
e.stopPropagation();
e.preventDefault();

const imgUrl = $(this).data('img');
const imgTitle = $(this).siblings('.item-title').text().trim();

// 创建一个隐藏的a标签用于下载
const link = document.createElement('a');
link.href = imgUrl;
link.download = imgTitle + '.jpg';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

// 添加下载动画反馈
const btn = $(this);
btn.html('<i class="fas fa-check"></i>下载中...');
setTimeout(() => {
btn.html('<i class="fas fa-download"></i>下载完成');
setTimeout(() => {
btn.html('<i class="fas fa-download"></i>下载图片');
}, 1500);
}, 500);
});

// 自动轮播
let currentIndex = 0;
const items = $('.accordion-item');
const totalItems = items.length;

function autoPlay() {
items.removeClass('active');
currentIndex = (currentIndex + 1) % totalItems;
items.eq(currentIndex).addClass('active');
}

let playInterval = setInterval(autoPlay, 3000);

// 鼠标悬停时暂停轮播
$('.accordion-gallery').hover(
function() {
clearInterval(playInterval);
},
function() {
playInterval = setInterval(autoPlay, 3000);
}
);
});
</script>
</body>
</html>