zblog春节欢迎代码

资源库 · 发表于 2025-1-18 00:39:54

说明：

春节欢迎横幅：页面顶部有一个春节欢迎横幅，内容为“🎉 春节快乐！🎉”。这个横幅有动画效果，从页面顶部滑入。
关闭按钮：横幅上有一个关闭按钮，用户可以点击按钮立即关闭横幅。
自动消失：横幅会在页面加载后的 5 秒钟自动消失，用户也可以手动点击关闭按钮。
响应式设计：该设计会在不同屏幕尺寸下自适应，确保手机和电脑端都能显示良好。
- 在屏幕宽度小于 768px 时，横幅文字和按钮大小会有所调整，使其在手机上也能清晰可见。
视觉设计：横幅背景色为春节常用的红色，字体为白色，使节日氛围更浓厚。

适用范围：

ZBlog主页：将这个代码加入到主页的模板文件中，确保春节祝福特效在用户访问网站时显示。
移动端和桌面端：该特效在不同设备上均能良好显示，适应不同屏幕尺寸。

自定义：

更换祝福语：您可以在 <span>🎉 春节快乐！🎉</span> 中修改祝福语，适应不同的节日或活动。
修改背景颜色：可以修改 .welcome-banner 中的 background-color 属性，选择更符合您网站主题的颜色。

<!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>
/* 设置全局背景和字体 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
/* 春节欢迎横幅样式 */
.welcome-banner {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 15px 0;
background-color: #ff4500; /* 春节红 */
color: white;
font-size: 1.5em;
font-weight: bold;
text-align: center;
z-index: 9999;
display: none;
animation: slideDown 1s ease-out forwards;
}
/* 横幅动画效果 */
@keyframes slideDown {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
/* 关闭按钮样式 */
.close-btn {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
font-size: 1.2em;
color: white;
background: none;
border: none;
cursor: pointer;
}
.close-btn:hover {
color: #ffd700; /* 悬停效果 */
}
/* 响应式设计 */
@media screen and (max-width: 768px) {
.welcome-banner {
font-size: 1.2em;
}
}
/* 页面内容样式 */
.content {
margin-top: 100px;
padding: 20px;
text-align: center;
font-size: 1.2em;
}
/* Copyright部分 */
.copyright {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
text-align: center;
font-size: 14px;
background-color: #333;
color: white;
padding: 10px 0;
}
</style>
</head>
<body>
<div class="welcome-banner" id="welcome-banner">
<span>🎉 春节快乐！🎉</span>
<button class="close-btn" onclick="closeBanner()">×</button>
</div>
<div class="content">
<h1>欢迎来到我们的网站！</h1>
<p>这里是一些内容。</p>
</div>
<div class="copyright">
</div>
<script>
// 页面加载时显示春节欢迎横幅
window.onload = function() {
setTimeout(function() {
document.getElementById('welcome-banner').style.display = 'block';
}, 500); // 延迟500ms后显示横幅
};
// 关闭春节欢迎横幅
function closeBanner() {
document.getElementById('welcome-banner').style.display = 'none';
}
// 自动消失横幅，5秒后关闭
setTimeout(function() {
closeBanner();
}, 5000); // 5秒钟后自动关闭
</script>
</body>
</html>

复制代码

[美化] zblog春节欢迎代码

2024万圣节纪念币

杰出贡献纪念币

种子用户纪念币

2024龙年纪念币

2025蛇年纪念币

关于我们

服务支持

fankui@shequla.com