源码介绍
超简约UI外卖券优惠吸粉HTML源码，适合推广使用，简单美观，源码单页源码体积小，简单易懂，带有注释
源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面，
更多好看的HTML代码可以搜索QQ沐编程，觉得有帮助的话可以CTRL+D收藏一下本站
效果截图
![图片[1]-超简约UI外卖券优惠吸粉HTML源码-QQ沐编程](https://www.qqmu.com/wp-content/uploads/2025/03/meituan.jpg)
源码如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--QQ沐编程 www.qqmu.com 学习QQ群：290987565 域名抢注 33210.jm.cn -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>每日专属外卖红包 | 美团饿了么通用优惠</title>
<style>
/* 基础重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', '思源黑体', system-ui;
}
body {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
min-height: 100vh;
opacity: 0;
animation: fadeIn 0.6s ease-out forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* 卡片式设计 */
.card {
background: rgba(255, 255, 255, 0.95);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 72, 255, 0.08);
margin: 20px auto;
padding: 24px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
max-width: 680px;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 72, 255, 0.12);
}
/* 标题样式 */
.header {
text-align: center;
margin: 40px 0;
position: relative;
}
.header h1 {
color: #2d3436;
font-size: 2.2rem;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 12px;
}
.header::after {
content: '';
display: block;
width: 60px;
height: 3px;
background: #4a90e2;
margin: 20px auto;
border-radius: 2px;
}
/* 红包内容区 */
.coupon-section {
position: relative;
background: linear-gradient(135deg, #fff5f5 0%, #fff0f6 100%);
border: 2px dashed #ff6b6b;
border-radius: 12px;
padding: 15px;
margin: 24px 0;
}
.coupon-text {
width: 100%;
min-height: 280px;
padding: 20px;
font-size: 1.1rem;
line-height: 1.8;
color: #495057;
border: 2px solid #e9ecef;
border-radius: 12px;
resize: none;
outline: none;
transition: all 0.3s ease;
font-family: 'Courier New', monospace;
white-space: pre-wrap;
word-break: break-all;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
@keyframes textGlow {
50% { text-shadow: 0 0 8px rgba(255, 107, 107, 0.3); }
}
/* 智能按钮 */
.copy-btn {
display: block;
width: 100%;
padding: 16px;
background: linear-gradient(135deg, #4a90e2 0%, #2670d9 100%);
color: white;
border: none;
border-radius: 10px;
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
overflow: hidden;
}
.copy-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform 0.5s ease;
}
.copy-btn:active::after {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
.copy-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(74, 144, 226, 0.3);
}
/* 使用说明 */
.guide {
color: #6c757d;
font-size: 0.95rem;
line-height: 1.6;
padding: 16px;
background: rgba(255, 255, 255, 0.9);
border-radius: 12px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.card {
margin: 12px;
padding: 16px;
}
.header h1 {
font-size: 1.8rem;
}
.coupon-text {
font-size: 0.95rem;
}
}
</style>
</head>
<body>
<div class="header">
<h1 style="color:red">每日外卖红包福利</h1>
<p style="color: #6c757d; font-size: 1rem;">每日更新·多平台通用·叠加使用</p>
</div>
<div class="card">
<div class="coupon-section">
<textarea class="coupon-text" id="couponContent" readonly>✧ 美团饿了么双平台红包 ✧
xxxxxxx 内容在这里
</textarea>
</div>
<button class="copy-btn" onclick="copyToClipboard()">一键复制全部红包</button>
</div>
<div class="card guide">
<h3 style="color: #2d3436; margin-bottom: 12px;">使用指南</h3>
<p>1. 点击上方按钮复制全部红包信息</p>
<p>2. 打开微信粘贴到「文件传输助手或好友」</p>
<p>3. 逐个点击链接领取当日红包</p>
<p>4. 下单时自动选择最大优惠组合</p>
<p style="margin-top: 16px; color: #ff6b6b;">✨ 小贴士：每天可重复领取，建议收藏本页</p>
</div>
<script>
// 现代剪贴板API
async function copyToClipboard() {
const inputElem = document.getElementById('couponContent');
inputElem.select(); // 自动选中文本提升用户体验
try {
if (navigator.clipboard) {
// 现代浏览器方式
await navigator.clipboard.writeText(inputElem.value);
showToast('✅ 复制成功！快去微信粘贴吧~');
} else {
// 兼容传统方式
throw new Error('Fallback to execCommand');
}
} catch (err) {
try {
// 使用 deprecated 但广泛支持的 execCommand
const success = document.execCommand('copy');
if (success) {
showToast('✅ 复制成功！快去微信粘贴吧~');
} else {
throw new Error('execCommand failed');
}
} catch (e) {
// 终极备用方案：提示用户手动复制
inputElem.setSelectionRange(0, 9999); // 确保全选
showToast('⚠️ 请长按文本框手动复制内容');
}
}
}
// 优雅的提示反馈
function showToast(message) {
const toast = document.createElement('div');
toast.style = `
position: fixed;
top: 30px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.85);
color: white;
padding: 12px 24px;
border-radius: 8px;
font-size: 0.95rem;
animation: toastSlide 0.3s ease-out;
z-index: 1000;
`;
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => {
toast.style.animation = 'toastFade 0.3s ease-out';
setTimeout(() => toast.remove(), 300);
}, 2000);
}
// 自动调整字体大小
function adjustFontSize() {
const textarea = document.getElementById('couponContent');
const maxWidth = textarea.offsetWidth - 40;
let fontSize = 16;
textarea.style.fontSize = fontSize + 'px';
while (textarea.scrollWidth > maxWidth && fontSize > 12) {
fontSize--;
textarea.style.fontSize = fontSize + 'px';
}
}
window.addEventListener('resize', adjustFontSize);
adjustFontSize();
</script>
</body>
</html>
© 版权声明
本站资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。敬请谅解！
THE END
