CSS3网页滚动图片元素动画特效_css3动画效果画廊-优快云博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3网页滚动图片元素动画特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
background: #f9f9f9;
color: #333;
line-height: 1.6;
}

.header {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
padding: 0 20px;
}

.header h1 {
font-size: 3rem;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.header p {
font-size: 1.2rem;
max-width: 800px;
margin-bottom: 30px;
}

.scroll-down {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
color: white;
font-size: 14px;
animation: bounce 2s infinite;
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0) translateX(-50%);
}
40% {
transform: translateY(-20px) translateX(-50%);
}
60% {
transform: translateY(-10px) translateX(-50%);
}
}

.content-section {
max-width: 1200px;
margin: 0 auto;
padding: 80px 20px;
}

.section-title {
text-align: center;
margin-bottom: 60px;
font-size: 2.5rem;
color: #444;
}

.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
margin-bottom: 80px;
}

.gallery-item {
width: 350px;
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
opacity: 0;
transform: translateY(50px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item.animate {
opacity: 1;
transform: translateY(0);
}

.gallery-item:nth-child(1) { transition-delay: 0.1s; }
.gallery-item:nth-child(2) { transition-delay: 0.2s; }
.gallery-item:nth-child(3) { transition-delay: 0.3s; }
.gallery-item:nth-child(4) { transition-delay: 0.4s; }
.gallery-item:nth-child(5) { transition-delay: 0.5s; }
.gallery-item:nth-child(6) { transition-delay: 0.6s; }

.gallery-img {
width: 100%;
height: 250px;
object-fit: cover;
transition: transform 0.5s ease;
}

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

.gallery-content {
padding: 20px;
}

.gallery-title {
font-size: 1.5rem;
margin-bottom: 10px;
color: #333;
}

.gallery-desc {
color: #666;
margin-bottom: 15px;
}

.gallery-link {
display: inline-block;
color: #6a11cb;
text-decoration: none;
font-weight: bold;
transition: color 0.3s;
}

.gallery-link:hover {
color: #2575fc;
}

.parallax-section {
height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
margin: 80px 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: white;
opacity: 0;
transform: translateY(50px);
transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.parallax-section.animate {
opacity: 1;
transform: translateY(0);
}

.parallax-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
}

.parallax-content {
position: relative;
z-index: 1;
max-width: 800px;
padding: 0 20px;
}

.parallax-content h2 {
font-size: 2.5rem;
margin-bottom: 20px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.parallax-content p {
font-size: 1.2rem;
margin-bottom: 30px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.btn {
display: inline-block;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
padding: 12px 30px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s;
box-shadow: 0 5px 15px rgba(106, 17, 203, 0.4);
}

.btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(106, 17, 203, 0.6);
}

.footer {
background: #222;
color: #aaa;
text-align: center;
padding: 40px 20px;
font-size: 14px;
}

.credit {
margin-top: 20px;
}

.credit a {
color: #6a11cb;
text-decoration: none;
}

.credit a:hover {
text-decoration: underline;
}

@media (max-width: 768px) {
.header h1 {
font-size: 2rem;
}

.header p {
font-size: 1rem;
}

.section-title {
font-size: 2rem;
margin-bottom: 40px;
}

.gallery-item {
width: 100%;
}

.parallax-content h2 {
font-size: 2rem;
}

.parallax-content p {
font-size: 1rem;
}
}
</style>
</head>
<body>
<header class="header">
<h1>CSS3滚动动画特效</h1>
<p>当您滚动页面时，观察图片元素如何优雅地呈现动画效果</p>
<div class="scroll-down">向下滚动 ▼</div>
</header>

<section class="content-section">
<h2 class="section-title">精选图片画廊</h2>
<div class="gallery">
<div class="gallery-item">
<img src="https://source.unsplash.com/random/600x400/?nature,water" alt="自然风光" class="gallery-img">
<div class="gallery-content">
<h3 class="gallery-title">自然之美</h3>
<p class="gallery-desc">探索大自然的壮丽景观和宁静水域。</p>
<a href="#" class="gallery-link">查看详情 →</a>
</div>
</div>

<div class="gallery-item">
<img src="https://source.unsplash.com/random/600x400/?city,night" alt="城市夜景" class="gallery-img">
<div class="gallery-content">
<h3 class="gallery-title">城市之光</h3>
<p class="gallery-desc">感受现代都市的繁华夜景和建筑艺术。</p>
<a href="#" class="gallery-link">查看详情 →</a>
</div>
</div>

<div class="gallery-item">
<img src="https://source.unsplash.com/random/600x400/?animal,wild" alt="野生动物" class="gallery-img">
<div class="gallery-content">
<h3 class="gallery-title">野生动物</h3>
<p class="gallery-desc">近距离观察野生动物的自然栖息地。</p>
<a href="#" class="gallery-link">查看详情 →</a>
</div>
</div>

<div class="gallery-item">
<img src="https://source.unsplash.com/random/600x400/?architecture,modern" alt="现代建筑" class="gallery-img">
<div class="gallery-content">
<h3 class="gallery-title">建筑艺术</h3>
<p class="gallery-desc">欣赏世界各地的现代建筑杰作。</p>
<a href="#" class="gallery-link">查看详情 →</a>
</div>
</div>

<div class="gallery-item">
<img src="https://source.unsplash.com/random/600x400/?food,gourmet" alt="美食佳肴" class="gallery-img">
<div class="gallery-content">
<h3 class="gallery-title">美食世界</h3>
<p class="gallery-desc">探索全球各地的美食文化和烹饪艺术。</p>
<a href="#" class="gallery-link">查看详情 →</a>
</div>
</div>

<div class="gallery-item">
<img src="https://source.unsplash.com/random/600x400/?travel,adventure" alt="旅行冒险" class="gallery-img">
<div class="gallery-content">
<h3 class="gallery-title">旅行冒险</h3>
<p class="gallery-desc">开启您的下一次难忘旅行冒险之旅。</p>
<a href="#" class="gallery-link">查看详情 →</a>
</div>
</div>
</div>
</section>

<section class="parallax-section" style="background-image: url('https://source.unsplash.com/random/1200x800/?mountain,sunset')">
<div class="parallax-content">
<h2>视差滚动效果</h2>
<p>体验令人惊叹的视差滚动效果，背景图片以不同速度滚动，创造出深度感。</p>
<a href="#" class="btn">了解更多</a>
</div>
</section>

<section class="content-section">
<h2 class="section-title">更多精彩内容</h2>
<div class="gallery">
<div class="gallery-item">
<img src="https://source.unsplash.com/random/600x400/?art,design" alt="艺术设计" class="gallery-img">
<div class="gallery-content">
<h3 class="gallery-title">创意艺术</h3>
<p class="gallery-desc">探索当代艺术家的创意作品和设计理念。</p>
<a href="#" class="gallery-link">查看详情 →</a>
</div>
</div>

<div class="gallery-item">
<img src="https://source.unsplash.com/random/600x400/?technology,future" alt="科技创新" class="gallery-img">
<div class="gallery-content">
<h3 class="gallery-title">科技创新</h3>
<p class="gallery-desc">了解最新的科技发展趋势和创新产品。</p>
<a href="#" class="gallery-link">查看详情 →</a>
</div>
</div>

<div class="gallery-item">
<img src="https://source.unsplash.com/random/600x400/?sport,action" alt="体育运动" class="gallery-img">
<div class="gallery-content">
<h3 class="gallery-title">体育运动</h3>
<p class="gallery-desc">感受体育运动的激情和运动员的精彩瞬间。</p>
<a href="#" class="gallery-link">查看详情 →</a>
</div>
</div>
</div>
</section>

<section class="parallax-section" style="background-image: url('https://source.unsplash.com/random/1200x800/?ocean,waves')">
<div class="parallax-content">
<h2>加入我们的社区</h2>
<p>成为我们不断壮大的社区的一员，获取更多精彩内容和独家优惠。</p>
<a href="#" class="btn">立即加入</a>
</div>
</section>

<footer class="footer">
<p>© 2023 CSS3滚动动画特效展示. 保留所有权利.</p>

</footer>

<script>
// 滚动动画效果
document.addEventListener('DOMContentLoaded', function() {
const galleryItems = document.querySelectorAll('.gallery-item');
const parallaxSections = document.querySelectorAll('.parallax-section');

// 检查元素是否在视口中
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top <= (window.innerHeight || document.documentElement.clientHeight) * 0.75 &&
rect.bottom >= 0
);
}

// 添加动画类
function animateOnScroll() {
galleryItems.forEach(item => {
if (isInViewport(item)) {
item.classList.add('animate');
}
});

parallaxSections.forEach(section => {
if (isInViewport(section)) {
section.classList.add('animate');
}
});
}

// 初始检查
animateOnScroll();

// 滚动事件监听
window.addEventListener('scroll', animateOnScroll);
});
</script>
</body>
</html>