3D Swiper 图片展示

ziblog

已于 2025-06-27 13:32:02 修改

阅读量908

点赞数 7

CC 4.0 BY-SA版权

文章标签： arcgis

于 2025-06-05 16:27:12 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148453625

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Swiper 图片展示</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background: #000;
color: #fff;
font-family: Arial, sans-serif;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.container {
width: 100%;
max-width: 1200px;
padding: 20px;
}

h1 {
text-align: center;
margin-bottom: 30px;
color: #fff;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.swiper {
width: 100%;
height: 500px;
perspective: 1200px;
}

.swiper-slide {
background-position: center;
background-size: cover;
width: 300px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
transition: transform 0.5s;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}

.swiper-slide::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

.swiper-slide-active {
transform: scale(1.2) translateZ(50px);
z-index: 10;
}

.swiper-slide-prev, .swiper-slide-next {
transform: scale(0.9) translateZ(20px);
}

.swiper-pagination {
bottom: 20px !important;
}

.swiper-pagination-bullet {
background: #fff;
opacity: 0.5;
width: 12px;
height: 12px;
margin: 0 8px !important;
}

.swiper-pagination-bullet-active {
background: #ff4d4d;
opacity: 1;
}

.footer {
margin-top: 30px;
text-align: center;
font-size: 14px;
color: #666;
}

.footer a {
color: #ff4d4d;
text-decoration: none;
}

/* 插入的链接样式 */
.special-link {
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
background: linear-gradient(45deg, #ff4d4d, #f9cb28);
color: white;
text-decoration: none;
border-radius: 30px;
font-weight: bold;
box-shadow: 0 4px 15px rgba(249, 203, 40, 0.3);
transition: all 0.3s ease;
}

.special-link:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(249, 203, 40, 0.4);
}
</style>
</head>
<body>
<div class="container">
<h1>3D 图片轮播展示</h1>

<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://source.unsplash.com/random/600x900/?nature,1" alt="自然风景1">
</div>
<div class="swiper-slide">
<img src="https://source.unsplash.com/random/600x900/?nature,2" alt="自然风景2">
</div>
<div class="swiper-slide">
<img src="https://source.unsplash.com/random/600x900/?nature,3" alt="自然风景3">
</div>
<div class="swiper-slide">
<img src="https://source.unsplash.com/random/600x900/?nature,4" alt="自然风景4">
</div>
<div class="swiper-slide">
<img src="https://source.unsplash.com/random/600x900/?nature,5" alt="自然风景5">
</div>
<div class="swiper-slide">
<img src="https://source.unsplash.com/random/600x900/?nature,6" alt="自然风景6">
</div>
<div class="swiper-slide">
<img src="https://source.unsplash.com/random/600x900/?nature,7" alt="自然风景7">
</div>
</div>

<div class="swiper-pagination"></div>
</div>


</div>

<div class="footer">
<p>© 2023 3D图片展示效果 | 使用Swiper实现</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const swiper = new Swiper('.swiper', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 20,
stretch: 0,
depth: 200,
modifier: 1,
slideShadows: true,
},
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
});
</script>
</body>
</html>