<!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;
overflow: hidden;
height: 100vh;
background: #000;
color: #fff;
}
.slider-container {
position: relative;
width: 100%;
height: 100vh;
perspective: 2000px;
}
.slider {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-size: cover;
background-position: center;
transition: transform 1.5s cubic-bezier(0.17, 0.67, 0.21, 0.99), opacity 1.5s ease;
opacity: 0;
transform: scale(0.8) rotateY(20deg);
box-shadow: 0 0 100px rgba(0, 0, 0, 0.8);
overflow: hidden;
}
.slide::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%);
z-index: 1;
}
.slide.active {
opacity: 1;
transform: scale(1) rotateY(0);
z-index: 10;
}
.slide-content {
position: absolute;
bottom: 20%;
left: 10%;
max-width: 600px;
z-index: 2;
transform: translateY(100px);
opacity: 0;
transition: all 1s ease 0.3s;
}
.slide.active .slide-content {
transform: translateY(0);
opacity: 1;
}
.slide h2 {
font-size: 4rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
background: linear-gradient(to right, #fff, #ddd);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.slide p {
font-size: 1.2rem;
line-height: 1.6;
margin-bottom: 2rem;
text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}
.btn {
display: inline-block;
padding: 12px 30px;
background: linear-gradient(45deg, #ff4e50, #f9d423);
color: #fff;
text-decoration: none;
border-radius: 30px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}
.slider-nav {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
z-index: 20;
display: flex;
}
.slider-nav-item {
width: 12px;
height: 12px;
margin: 0 10px;
border-radius: 50%;
background: rgba(255,255,255,0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.slider-nav-item.active {
background: #fff;
transform: scale(1.3);
}
.link {
position: absolute;
bottom: 20px;
right: 20px;
color: rgba(255,255,255,0.7);
font-family: Arial, sans-serif;
text-decoration: none;
z-index: 100;
transition: color 0.3s ease;
}
.link:hover {
color: #fff;
}
</style>
</head>
<body>
<div class="slider-container">
<div class="slider" id="slider">
<div class="slide active" style="background-image: url('https://source.unsplash.com/random/1920x1080?mountain')">
<div class="slide-content">
<h2>探索未知的世界</h2>
<p>勇敢地踏出第一步，发现那些令人惊叹的风景和无限可能。</p>
<a href="#" class="btn">开始探索</a>
</div>
</div>
<div class="slide" style="background-image: url('https://source.unsplash.com/random/1920x1080?ocean')">
<div class="slide-content">
<h2>感受自然的壮丽</h2>
<p>浩瀚的海洋，巍峨的山脉，大自然的鬼斧神工等待着你的发现。</p>
<a href="#" class="btn">了解更多</a>
</div>
</div>
<div class="slide" style="background-image: url('https://source.unsplash.com/random/1920x1080?city')">
<div class="slide-content">
<h2>都市的脉搏</h2>
<p>现代都市的繁华与活力，体验不一样的生活方式和文化魅力。</p>
<a href="#" class="btn">探索城市</a>
</div>
</div>
<div class="slide" style="background-image: url('https://source.unsplash.com/random/1920x1080?space')">
<div class="slide-content">
<h2>仰望星空</h2>
<p>浩瀚宇宙中，我们只是沧海一粟，但探索的脚步永不停歇。</p>
<a href="#" class="btn">仰望星空</a>
</div>
</div>
</div>
<div class="slider-nav" id="sliderNav">
<div class="slider-nav-item active"></div>
<div class="slider-nav-item"></div>
<div class="slider-nav-item"></div>
<div class="slider-nav-item"></div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const slider = document.getElementById('slider');
const slides = document.querySelectorAll('.slide');
const navItems = document.querySelectorAll('.slider-nav-item');
let currentSlide = 0;
let slideInterval;
const slideCount = slides.length;
// 初始化滑块
function initSlider() {
// 设置初始活动幻灯片
slides[currentSlide].classList.add('active');
navItems[currentSlide].classList.add('active');
// 启动自动播放
startSlideShow();
// 添加导航点击事件
navItems.forEach((item, index) => {
item.addEventListener('click', () => {
goToSlide(index);
});
});
// 添加键盘控制
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') {
nextSlide();
} else if (e.key === 'ArrowLeft') {
prevSlide();
}
});
// 添加触摸事件
let touchStartX = 0;
let touchEndX = 0;
slider.addEventListener('touchstart', (e) => {
touchStartX = e.changedTouches[0].screenX;
}, false);
slider.addEventListener('touchend', (e) => {
touchEndX = e.changedTouches[0].screenX;
handleSwipe();
}, false);
}
// 处理滑动
function handleSwipe() {
if (touchEndX < touchStartX - 50) {
nextSlide();
}
if (touchEndX > touchStartX + 50) {
prevSlide();
}
}
// 转到指定幻灯片
function goToSlide(index) {
// 重置当前幻灯片
slides[currentSlide].classList.remove('active');
navItems[currentSlide].classList.remove('active');
// 更新当前幻灯片索引
currentSlide = (index + slideCount) % slideCount;
// 设置新活动幻灯片
slides[currentSlide].classList.add('active');
navItems[currentSlide].classList.add('active');
// 重置自动播放计时器
resetInterval();
}
// 下一张幻灯片
function nextSlide() {
goToSlide(currentSlide + 1);
}
// 上一张幻灯片
function prevSlide() {
goToSlide(currentSlide - 1);
}
// 启动自动播放
function startSlideShow() {
slideInterval = setInterval(nextSlide, 5000);
}
// 重置自动播放计时器
function resetInterval() {
clearInterval(slideInterval);
startSlideShow();
}
// 初始化滑块
initSlider();
// 添加视差效果
document.addEventListener('mousemove', (e) => {
const x = e.clientX / window.innerWidth;
const y = e.clientY / window.innerHeight;
slides.forEach(slide => {
const content = slide.querySelector('.slide-content');
if (content) {
content.style.transform = `translate(-${x * 20}px, -${y * 20}px)`;
}
});
});
});
</script>
</body>
</html>
扫一扫
949
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
