✨博主：命运之光
🌸专栏：Python星辰秘典
🐳专栏：web开发（简单好用又好看）
❤️专栏：Java经典程序设计
☀️博主的其他文章：点击进入博主的主页
前言：欢迎踏入我的Web项目专栏，一段神奇而令人陶醉的数字世界！
🌌在这里，我将带您穿越时空，揭开属于Web的奥秘。通过HTML、CSS和JavaScript的魔力，我创造了一系列令人惊叹的Web项目，它们仿佛是从梦境中涌现而出。
🌌在这个专栏中，您将遇到华丽的界面，如流星划过夜空般迷人；您将感受到动态的交互，如魔法般让您沉浸其中；您将探索响应式设计的玄妙，让您的屏幕变幻出不同的绚丽景象。
🌌无论您是一个探险家还是一位嗜血的代码巫师，这个专栏将成为您的魔法书。我将分享每个项目的秘密，解开编码的谜题，让您也能够拥有制作奇迹的力量。
🌌准备好了吗？拿起您的键盘，跟随我的指引，一起进入这个神秘而充满惊喜的数字王国。在这里，您将找到灵感的源泉，为自己创造出一段奇幻的Web之旅！
目录
简介
视频展示
图片展示（1）
图片展示（2）
图片展示（3）
页面亮点
项目源代码
代码的使用方法（超简单什么都不用下载）
🍓1.打开记事本
🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可
🍓3.打开html文件（大功告成(●'◡'●)）
结语
简介
在这个名为《生日快乐：穿越奇妙时光的温暖庆祝》的博客中，我将以独特的创意和令人难忘的效果，为你带来一场难以忘怀的生日庆祝活动。通过令人陶醉的视觉效果、动人的文字和倒计时提醒，希望为你的生日庆祝增添温暖、喜悦和难忘的回忆。
视频展示
生日快乐！
图片展示（1）
图片展示（2）
图片展示（3）
页面亮点
-
奇妙时光旅程： 通过精心设计的下雪背景效果，我们将带你穿越时光，踏入一个充满奇幻和浪漫的世界。雪花的飘舞和背景的变化将为你的生日庆祝带来特别的氛围。
-
生日祝福幻灯片秀： 博客中的幻灯片将呈现一系列精选的生日祝福图片，自动切换展示。通过欢快的音乐和温暖的图像，将向你传达最真挚的祝福。
-
倒计时提醒与特殊时刻： 在页面顶部，一个倒计时器将不断提醒你离特殊时刻的到来还有多长时间。每一秒都是更接近庆祝的机会，让你的生日变得更加期待和特别。
-
温馨生日祝福语： 页面中心的容器将展示特别准备的生日祝福语。用真挚的文字表达对你生日的祝福，希望你度过一个充满欢笑、幸福和美好回忆的特殊时刻。
项目源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Your+Chosen+Font&display=swap" rel="stylesheet">
<title>下雪背景效果和生日祝福</title>
<style>
body {
overflow: hidden;
margin: 0;
padding: 0;
text-align: center;
background-color: #f2f2f2;
font-family: 'Your Chosen Font', cursive;
animation: backgroundAnimation 5s infinite;
}
#snow-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.snowflake {
position: absolute;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
opacity: 0.8;
pointer-events: none;
animation: snowfall linear infinite;
}
@keyframes snowfall {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100vh);
}
}
#slideshow {
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
margin: 0 auto; /* 添加这行代码使其居中 */
}
#slideshow img {
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 居中对齐 */
opacity: 0;
transition: opacity 1s ease-in-out;
}
#slideshow img.active {
opacity: 1;
}
@keyframes backgroundAnimation {
0% {
background-color: #ffafbd;
}
50% {
background-color: #ffc3a0;
}
100% {
background-color: #ffa0bd;
}
}
.container {
max-width: 600px;
margin: 0 auto;
text-align: center;
padding: 40px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 20px; /* 调整生日快乐标题和下面文字的间距 */
}
h1 {
color: #ff69b4;
font-size: 28px;
margin-bottom: 10px; /* 调整标题和图片之间的间距 */
}
img {
width: 200px;
border-radius: 50%;
margin: 1px 0px; /* 调整图片和下方文字之间的间距 */
}
p {
color: #333;
line-height: 1.5;
margin-bottom: 20px;
}
.fade-in {
opacity: 0;
animation: fadeInAnimation 2s forwards;
}
@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#countdown {
display: flex;
justify-content: center;
margin-top: 20px;
}
.time {
font-size: 36px;
margin: 0 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
animation-fill-mode: forwards;
}
#days {
background-color: #f5f5f5;
}
#hours {
background-color: #e0e0e0;
}
#minutes {
background-color: #d5d5d5;
}
#seconds {
background-color: #cccccc;
}
.time span {
display: inline-block;
font-size: 14px;
margin-top: 5px;
color: #333;
}
.ribbon {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.ribbon:before,
.ribbon:after {
content: "";
position: absolute;
display: block;
width: 200px;
height: 200px;
background: linear-gradient(to bottom, #ff69b4, #ffc3a0, #ffafbd);
border-radius: 50%;
opacity: 0.6;
animation: ribbonAnimation 2s infinite;
}
.ribbon:before {
top: -100px;
left: -50px;
}
.ribbon:after {
top: -100px;
right: -50px;
}
/* 定义彩带动画 */
@keyframes ribbonAnimation {
0% {
transform: translate(0, 0) rotate(0);
}
100% {
transform: translate(-800px, -800px) rotate(360deg);
}
}
</style>
</head>
<body>
<div id="snow-container"></div>
<div class="fade-in">
<h1>Welcome to the world of Fate's Light</h1>
<p>After reading, remember to like, collect, and review. Hahaha.</p>
</div>
<div class="container">
<h1>生日快乐！</h1>
<div id="slideshow">
<img src="1.jpg" alt="Image 1" class="active">
<img src="2.png" alt="Image 2">
<img src="3.png" alt="Image 3">
</div>
<p>亲爱的命运之光，</p>
<p>祝你生日快乐！愿你的生日充满欢乐、幸福和美好的回忆。</p>
<p>在这特殊的日子里，我希望你能享受每一刻，并和亲朋好友一起度过一个美好的时光。</p>
<p>再次祝你生日快乐！</p>
</div>
<div id="countdown">
<div class="time" id="days"></div>
<div class="time" id="hours"></div>
<div class="time" id="minutes"></div>
<div class="time" id="seconds"></div>
</div>
<script>
// 设置生日日期（月从0开始计数）
const birthday = new Date("2023-07-11");
function updateCountdown() {
const now = new Date();
const difference = birthday - now;
// 计算剩余的天数、小时数、分钟数和秒数
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
const minutes = Math.floor((difference / 1000 / 60) % 60);
const seconds = Math.floor((difference / 1000) % 60);
// 更新倒计时显示
document.getElementById("days").textContent = days.toString().padStart(2, "0") + "天";
document.getElementById("hours").textContent = hours.toString().padStart(2, "0") + "小时";
document.getElementById("minutes").textContent = minutes.toString().padStart(2, "0") + "分钟";
document.getElementById("seconds").textContent = seconds.toString().padStart(2, "0") + "秒";
}
// 每秒更新一次倒计时
setInterval(updateCountdown, 1000);
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var currentIndex = 0;
var slides = $('#slideshow img');
var slideCount = slides.length;
function showSlide(index) {
slides.removeClass('active');
slides.eq(index).addClass('active');
}
function nextSlide() {
currentIndex = (currentIndex + 1) % slideCount;
showSlide(currentIndex);
}
// 自动播放幻灯片
setInterval(nextSlide, 3000);
// 初始化显示第一张幻灯片
showSlide(currentIndex);
});
</script>
<script>
function createSnowflake() {
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
snowflake.style.left = Math.random() * window.innerWidth + 'px';
snowflake.style.animationDuration = Math.random() * 5 + 5 + 's';
snowflake.style.opacity = Math.random();
snowflake.style.fontSize = Math.random() * 10 + 10 + 'px';
const randomColor = getRandomColor();
snowflake.style.backgroundColor = randomColor;
snowflake.innerHTML = '生日快乐❤️'; // You can customize the snowflake symbol here
return snowflake;
}
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function snowfall() {
const snowContainer = document.getElementById('snow-container');
const numSnowflakes = 50; // Adjust the number of snowflakes here
for (let i = 0; i < numSnowflakes; i++) {
const snowflake = createSnowflake();
snowContainer.appendChild(snowflake);
}
}
snowfall();
</script>
</body>
</html>
代码的使用方法（超简单什么都不用下载）
🍓1.打开记事本
🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可
🍓3.打开html文件（大功告成(●'◡'●)）
结语
感谢你阅读我的生日庆祝博客。愿你的生日充满欢笑和美好回忆。祝你生日快乐！🎉🎉
本章的内容就到这里了，觉得对你有帮助的话就支持一下博主把~
🌌点击下方个人名片，交流会更方便哦~
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
