一天时段动画特效

原创已于 2025-06-27 11:17:27 修改 · 274 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-18 14:29:42 首次发布

<!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: 'Microsoft YaHei', Arial, sans-serif;
background: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}

.container {
width: 100%;
max-width: 800px;
position: relative;
height: 500px;
margin: 0 auto;
perspective: 1000px;
}

.time-scene {
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
overflow: hidden;
transform-style: preserve-3d;
transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
transform: translateY(50px) rotateX(20deg);
}

.time-scene.active {
opacity: 1;
transform: translateY(0) rotateX(0);
}

.scene-bg {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transition: all 1.5s ease;
}

.scene-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 40px;
color: white;
text-align: center;
transform: translateY(30px);
opacity: 0;
transition: all 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

.time-scene.active .scene-content {
transform: translateY(0);
opacity: 1;
}

.scene-content h2 {
font-size: 3rem;
margin-bottom: 15px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

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

.time-controls {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
z-index: 100;
}

.time-btn {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
margin: 0 8px;
cursor: pointer;
transition: all 0.3s;
}

.time-btn.active {
background: rgba(255, 255, 255, 0.9);
transform: scale(1.3);
}

.credit {
position: fixed;
bottom: 20px;
right: 20px;
color: rgba(0, 0, 0, 0.5);
font-size: 14px;
z-index: 100;
}

.credit a {
color: rgba(0, 0, 0, 0.8);
text-decoration: none;
}

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

/* 不同时段的背景和颜色 */
.morning {
background: linear-gradient(to bottom, #6dd5ed, #2193b0);
}

.morning .scene-bg {
background-image: url('https://source.unsplash.com/random/800x500/?morning,sunrise');
}

.noon {
background: linear-gradient(to bottom, #f5af19, #f12711);
}

.noon .scene-bg {
background-image: url('https://source.unsplash.com/random/800x500/?noon,sunny');
}

.afternoon {
background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

.afternoon .scene-bg {
background-image: url('https://source.unsplash.com/random/800x500/?afternoon');
}

.evening {
background: linear-gradient(to bottom, #8e2de2, #4a00e0);
}

.evening .scene-bg {
background-image: url('https://source.unsplash.com/random/800x500/?evening,sunset');
}

.night {
background: linear-gradient(to bottom, #0f2027, #203a43, #2c5364);
}

.night .scene-bg {
background-image: url('https://source.unsplash.com/random/800x500/?night,stars');
}

/* 响应式调整 */
@media (max-width: 768px) {
.container {
height: 400px;
}

.scene-content {
padding: 20px;
}

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

.scene-content p {
font-size: 1rem;
}
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">

<div class="time-scene morning active">
<div class="scene-bg"></div>
<div class="scene-content">
<h2>清晨</h2>
<p>新的一天开始了，阳光洒满大地，万物苏醒。</p>
</div>
</div>


<div class="time-scene noon">
<div class="scene-bg"></div>
<div class="scene-content">
<h2>正午</h2>
<p>阳光直射，是一天中最明亮、最温暖的时刻。</p>
</div>
</div>


<div class="time-scene afternoon">
<div class="scene-bg"></div>
<div class="scene-content">
<h2>午后</h2>
<p>阳光渐渐柔和，适合享受悠闲的下午时光。</p>
</div>
</div>


<div class="time-scene evening">
<div class="scene-bg"></div>
<div class="scene-content">
<h2>黄昏</h2>
<p>夕阳西下，天空染上绚丽的色彩。</p>
</div>
</div>


<div class="time-scene night">
<div class="scene-bg"></div>
<div class="scene-content">
<h2>夜晚</h2>
<p>星空璀璨，万物进入宁静的休息时刻。</p>
</div>
</div>

<div class="time-controls">
<div class="time-btn active" data-time="morning"></div>
<div class="time-btn" data-time="noon"></div>
<div class="time-btn" data-time="afternoon"></div>
<div class="time-btn" data-time="evening"></div>
<div class="time-btn" data-time="night"></div>
</div>
</div>


<script>
$(document).ready(function() {
const $timeScenes = $('.time-scene');
const $timeBtns = $('.time-btn');
let currentIndex = 0;
let autoPlayInterval;

// 初始化
function initTimeScene() {
$timeScenes.eq(currentIndex).addClass('active');
$timeBtns.eq(currentIndex).addClass('active');

// 自动播放
startAutoPlay();

// 鼠标悬停暂停自动播放
$('.container').hover(
function() {
clearInterval(autoPlayInterval);
},
function() {
startAutoPlay();
}
);
}

// 切换时段
function goToTime(index) {
if (index === currentIndex) return;

// 移除当前活动状态
$timeScenes.eq(currentIndex).removeClass('active');
$timeBtns.eq(currentIndex).removeClass('active');

// 更新索引
currentIndex = index;

// 添加新活动状态
$timeScenes.eq(currentIndex).addClass('active');
$timeBtns.eq(currentIndex).addClass('active');
}

// 下一时段
function nextTime() {
const newIndex = (currentIndex + 1) % $timeScenes.length;
goToTime(newIndex);
}

// 自动播放
function startAutoPlay() {
clearInterval(autoPlayInterval);
autoPlayInterval = setInterval(nextTime, 5000);
}

// 按钮点击事件
$timeBtns.click(function() {
const index = $(this).index();
goToTime(index);
});

// 键盘导航
$(document).keydown(function(e) {
if (e.keyCode === 37) { // 左箭头
const newIndex = (currentIndex - 1 + $timeScenes.length) % $timeScenes.length;
goToTime(newIndex);
} else if (e.keyCode === 39) { // 右箭头
nextTime();
}
});

// 初始化
initTimeScene();
});
</script>
</body>
</html>