文章摘要
A minimalist UI design for an online food coupon promotion has been created in HTML and CSS, featuring clear instructions for users to copy and use digital coupons via WeChat. The page includes responsive layout adjustments for smaller screens and dual-platform compatibility for Meituan and Elema. The guide outlines steps to copy the text, highlights the daily renewal of coupons and their stackable usage. Key interactive elements like animations and font-size auto-adjustments enhance user experience, while fallback options ensure broad browser compatibility for smooth text copying.
— 文章部分摘要由DeepSeek深度思考而成
适合推广使用，看见做类似的就自己写了一个，很简约 HTML，小白也能修改
![图片[1]|超简约UI外卖券优惠吸粉代码|不死鸟资源网](https://busi.net/wp-content/uploads/2025/03/20250320143913177-image.png)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<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>本站文章部分内容可能来源于网络,仅供大家学习参考,如有侵权,请联系站长📧cutwork@qq.com进行删除处理!
THE END
