标题
马年祝福 HTML 单页代码
逍遥 - 02月01日 10:27
60℃ 0
内容
1. 视频替换（核心）
代码中提供了在线视频和本地视频两种方式，二选一即可：
在线视频（B 站 / 抖音 / 腾讯 / 优酷）：复制视频的嵌入代码，替换
<iframe>的src属性即可（示例为 B 站嵌入，直接换地址）；本地视频：取消注释代码中
<video>部分，删除<iframe>，将src改为你的视频文件路径（如./video/ma-nian-zhu-fu.mp4），poster是视频封面图，可自行添加。
提示：视频格式推荐MP4（兼容性最好），本地视频需保证视频文件和 HTML 文件的路径正确（建议新建video文件夹存放视频）。
3. 视觉风格修改
主色调：在
tailwind.config的colors.horse中修改红、金、棕、米黄的色值，即可全局改变主题色；飘动元素：在脚本的
elems数组中修改 / 添加飘动内容（如加入吉、祥、春等）；背景渐变：在
bg-gradient-horse的@layer utilities中修改渐变颜色和动画时长。
4. 适配性
页面已做响应式适配，电脑、平板、手机打开均会自动调整布局，祝福语板块会从 PC 端的 3 列，变成平板 2 列、手机 1 列，视频也会自适应屏幕宽度。
页面特色
动态视觉：页面背景有随机飘动的马、福、红包、金元宝等元素，随窗口大小自适应，氛围感拉满；
渐变动效：头部和底部的马年渐变背景会缓慢动效，增加灵动感；
交互动画：祝福语卡片鼠标悬停时会放大 + 金色阴影，提升交互体验；
多风格祝福语：覆盖日常祝福、朋友圈、商务拜年、趣味聊天等场景，直接复制可用；
轻量无依赖：所有样式和资源均为在线 CDN，无需本地安装任何框架，打开即用；
视频优化：支持懒加载，减少页面加载速度，播放体验更流畅。
使用方法
新建一个文本文档，将上述代码全部复制粘贴进去；
将文本文档重命名为
index.html（注意修改文件后缀，从.txt改为.html）；按需修改视频地址和祝福语；
双击
index.html即可在浏览器中打开，也可部署到服务器 / 网盘分享给他人。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>2026马年大吉 - 新春祝福专题页</title> <!-- 引入Tailwind CSS做样式，无需本地安装 --> <script src="https://cdn.tailwindcss.com"></script> <!-- 引入Font Awesome图标 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> <!-- 自定义Tailwind配置 --> <script> tailwind.config = { theme: { extend: { colors: { horse: { red: '#E63946', // 马年主红 gold: '#FFD700', // 鎏金 dark: '#8B4513', // 棕马色 light: '#FFF8DC' // 米黄底 }, }, fontFamily: { chinese: ['"Noto Sans SC"', 'sans-serif'], }, } } } </script> <style type="text/tailwindcss"> @layer utilities { .text-shadow-gold { text-shadow: 0 0 5px #FFD700, 0 0 10px #FFC107; } .card-hover { @apply transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-horse-gold/30; } .bg-gradient-horse { background: linear-gradient(135deg, #E63946 0%, #FFD700 50%, #8B4513 100%); background-size: 200% 200%; animation: gradientMove 8s ease infinite; } @keyframes gradientMove { 0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;} } /* 动态飘马/飘雪元素 */ .float-elem { position: absolute; color: #FFD700; opacity: 0.7; animation: float linear infinite; z-index: 1; } @keyframes float { 0% {transform: translateY(0) rotate(0deg);} 100% {transform: translateY(100vh) rotate(360deg);} } } </style> <!-- 引入中文字体 --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet"> </head> <body class="font-chinese bg-horse-light min-h-screen relative overflow-x-hidden" style="font-family: 'Noto Sans SC', sans-serif;"> <!-- 动态飘马背景元素 --> <div id="floatContainer"></div> <!-- 页面头部 --> <header class="bg-gradient-horse py-8 px-4 shadow-md relative z-10"> <div class="container mx-auto text-center"> <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-black text-white text-shadow-gold mb-2">2026丙午马年</h1> <p class="text-[clamp(1rem,2vw,1.2rem)] text-white font-medium">金鞍耀目迎新春，骏马扬蹄启新程</p> <i class="fa-solid fa-horse-head text-4xl text-horse-gold mt-4 animate-bounce"></i> </div> </header> <main class="container mx-auto px-4 py-12 relative z-10"> <!-- 马年祝福视频板块 --> <section class="mb-16 bg-white rounded-2xl shadow-xl p-4 md:p-6"> <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-horse-red text-center mb-6 flex items-center justify-center"> <i class="fa-solid fa-video-camera mr-3 text-horse-gold"></i>马年专属祝福视频 </h2> <!-- 视频容器：适配多端，宽高比16:9 --> <div class="aspect-video w-full max-w-4xl mx-auto rounded-lg overflow-hidden shadow-lg"> <!-- 替换为你提供的B站视频地址 --> <iframe src="//player.bilibili.com/player.html?isOutside=true&aid=115757321033084&bvid=BV1gRqSBJEQi&cid=34886388708&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" class="w-full h-full" title="马年祝福视频"> </iframe> </div> <p class="text-center text-gray-600 mt-4">金驹踏春，岁岁平安</p> </section> <!-- 祝福语板块：分4类，适配多端 --> <section> <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-horse-red text-center mb-8 flex items-center justify-center"> <i class="fa-solid fa-gift mr-3 text-horse-gold"></i>马年吉祥祝福语大全 </h2> <!-- 温馨家常版 --> <div class="mb-10 bg-white rounded-2xl shadow-md p-6 card-hover"> <h3 class="text-xl font-semibold text-horse-dark border-b-2 border-horse-gold pb-3 mb-4"> <i class="fa-solid fa-house-chimney mr-2"></i>温馨家常版 </h3> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>马年到，福气到，全家安康没烦恼！</p> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>金马迎春，岁岁年年，平安喜乐。</p> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>马年行大运，家和万事兴，财源滚滚来。</p> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>骏马踏春来，吉祥如意伴，生活比蜜甜。</p> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>新年迎金马，平安福满堂，健康永相伴。</p> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>马年安康，四季平安，万事顺意。</p> </div> </div> <!-- 励志奋斗版 --> <div class="mb-10 bg-white rounded-2xl shadow-md p-6 card-hover"> <h3 class="text-xl font-semibold text-horse-dark border-b-2 border-horse-gold pb-3 mb-4"> <i class="fa-solid fa-person-running mr-2"></i>励志奋斗版 </h3> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>骏马扬蹄，不负韶华，2026乘风破浪！</p> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>马到成功，功不唐捐，前路皆坦途。</p> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>策马扬鞭，勇往直前，万事皆可期。</p> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>金鞍驰聘，志在千里，新年创佳绩。</p> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>龙马精神，砥砺前行，未来皆美好。</p> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>踏马出征，不负时光，岁岁皆胜意。</p> </div> </div> <!-- 商务贺喜版 --> <div class="mb-10 bg-white rounded-2xl shadow-md p-6 card-hover"> <h3 class="text-xl font-semibold text-horse-dark border-b-2 border-horse-gold pb-3 mb-4"> <i class="fa-solid fa-briefcase mr-2"></i>商务贺喜版 </h3> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>马年大吉，生意兴隆，财源广进达三江。</p> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>金马贺岁，财源滚滚，事业蒸蒸日上。</p> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>策马迎新，合作共赢，宏图大展兴伟业。</p> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>马到功成，财源茂盛，事业更上一层楼。</p> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>新春迎金马，鸿图大展，生意四海兴隆。</p> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>龙马精神，商运亨通，财源滚滚盈门庭。</p> </div> </div> <!-- 趣味简约版 --> <div class="bg-white rounded-2xl shadow-md p-6 card-hover"> <h3 class="text-xl font-semibold text-horse-dark border-b-2 border-horse-gold pb-3 mb-4"> <i class="fa-solid fa-smile mr-2"></i>趣味简约版 </h3> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>2026，马到成功，一路开挂！</p> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>金马送福，新年暴富，万事胜意！</p> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>策马奔腾，岁岁有钱，年年有甜。</p> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>马年行大运，霉运全走开，好运全到来。</p> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>金驹踏春，新年超顺，暴富暴美！</p> <p><i class="fa-solid fa-star text-horse-gold mr-2"></i>龙马精神，新年超神，万事皆顺！</p> </div> </div> </section> <!-- 底部祝福横幅 --> <section class="bg-gradient-horse rounded-2xl py-8 px-4 text-center shadow-xl relative z-10"> <p class="text-[clamp(1.2rem,3vw,1.8rem)] font-bold text-white text-shadow-gold"> 丙午马年 · 金驹迎春 · 岁岁平安 · 年年有余 </p> <p class="text-white mt-4 text-lg">愿你策马扬鞭，奔赴山海，2026万事顺意！</p> </section> </main> <!-- 页面底部 --> <footer class="bg-horse-dark text-white py-6 px-4 text-center mt-8 relative z-10"> <p>© 2026 丙午马年新春祝福专题 | 金鞍耀目，骏马扬蹄</p> <p class="mt-2 text-horse-light/70">愿所有美好，如期而至</p> </footer> <!-- 核心脚本：动态飘马效果 + 页面交互 --> <script> // 动态生成飘马/飘福元素 function createFloatElems() { const container = document.getElementById('floatContainer'); const elems = ['🐎', '🏮', '福', '🧧', '✨', '金', '马']; // 飘动元素 const count = window.innerWidth < 768 ? 15 : 30; // 移动端少一点，PC端多一点 for (let i = 0; i < count; i++) { const elem = document.createElement('div'); elem.className = 'float-elem'; // 随机选择元素 elem.textContent = elems[Math.floor(Math.random() * elems.length)]; // 随机样式 elem.style.fontSize = `${Math.random() * 20 + 16}px`; elem.style.left = `${Math.random() * 100}vw`; elem.style.top = `${Math.random() * -100}px`; elem.style.animationDuration = `${Math.random() * 20 + 10}s`; elem.style.opacity = Math.random() * 0.5 + 0.3; container.appendChild(elem); } } // 页面加载完成后执行 window.onload = function() { createFloatElems(); // 视频懒加载优化 const iframes = document.querySelectorAll('iframe'); iframes.forEach(iframe => { iframe.loading = 'lazy'; }); }; // 窗口大小改变时重新生成飘动元素 window.onresize = function() { document.getElementById('floatContainer').innerHTML = ''; createFloatElems(); }; </script> </body> </html>你可能想看：
随机文章
标签
- 最近发表
- 相关推荐
-
- 网站跳转HTML代码GO跳转导航网站必备广告必备跳转
- 马年大吉-新春快乐预祝你马年行大运万事皆顺意！
- 新出快乐马年大吉祝福语
- 赞助我们HTML页面
- HTML美食大转盘，想吃什么而犹豫不决的最佳选择
- 个人相册小广场，类似于图片墙，HTML体积小不占地方，喜欢的快来使用
- 简约代挂引导页HTML源码，全自动代挂无需你操心
- 网站暂时闭站公告纯HTML，一键部署源码
- 时空穿越 · 闭站公告纯HTML
- HTML5 + Web Audio API + lamejs 实现的音频在线剪切助手源码
- 随机美女热舞HTML 页面包含样式美化和随机切换逻辑。
- 智能网页工作便签备忘录包含 HTML 结构、CSS 样式、基础 JavaScript 交互
- 文字转PNG和ICOHTML+CSS+JavaScript+Canvas，结合js-ico库实现 ICO 格式
- 引导页html5源码Notepad++、VS Code
- 网站导航页面，引导页HTML，自带子页面