七夕节，使用AI编写了一个html祝福文档
时间：09-12来源：作者：点击数：
编写为HTML文档，可以使用手机直接打开，画面可能有点挫。。。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>七夕节快乐</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
love: '#E94560',
night: '#0F3460',
star: '#FFD700',
cloud: '#F1F1F8'
},
fontFamily: {
chinese: ['"Ma Shan Zheng"', '"Noto Serif SC"', 'serif']
}
}
}
}
</script>
<style type="text/tailwindcss">
[url=home.php?mod=space&uid=1688376]@layer[/url] utilities {
.text-shadow {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.text-shadow-lg {
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-twinkle {
animation: twinkle 3s ease-in-out infinite;
}
.animate-fall {
animation: fall linear infinite;
}
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
@keyframes twinkle {
0%, 100% {
opacity: 0.6;
transform: scale(0.95);
}
50% {
opacity: 1;
transform: scale(1.05);
}
}
@keyframes fall {
0% {
transform: translateY(-10px) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
.star {
position: absolute;
background-color: #FFD700;
border-radius: 50%;
}
.heart {
position: absolute;
background-color: #E94560;
transform: rotate(45deg);
}
.heart:before, .heart:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: inherit;
border-radius: 50%;
}
.heart:before {
top: -50%;
left: 0;
}
.heart:after {
top: 0;
left: -50%;
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
</head>
<body class="min-h-screen bg-gradient-to-b from-night to-[#1A1A2E] overflow-hidden relative">
<!-- 星空背景 -->
<div id="stars" class="fixed inset-0 z-0"></div>
<!-- 漂浮的爱心 -->
<div id="hearts" class="fixed inset-0 z-10 pointer-events-none"></div>
<!-- 主内容 -->
<div class="relative z-20 container mx-auto px-4 py-16 flex flex-col items-center justify-center min-h-screen">
<h1 class="text-[clamp(2.5rem,8vw,5rem)] font-chinese text-star text-center text-shadow-lg mb-6 animate-float">
七夕节快乐
</h1>
<div class="bg-cloud/10 backdrop-blur-md rounded-2xl p-8 max-w-2xl w-full shadow-2xl border border-white/10">
<div class="text-center mb-8">
<i class="fa fa-heart text-5xl text-love animate-twinkle"></i>
</div>
<p class="text-[clamp(1.2rem,4vw,1.8rem)] font-chinese text-white text-center leading-relaxed mb-6">
七夕之夜，星光璀璨<br>
愿天下有情人终成眷属<br>
愿爱意如星河般永恒
</p>
<div class="flex justify-center mt-8">
<button id="blessBtn" class="bg-love hover:bg-love/80 text-white font-bold py-3 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105 shadow-lg flex items-center">
<i class="fa fa-gift mr-2"></i> 发送祝福
</button>
</div>
</div>
<div class="mt-12 text-white/70 text-center">
<p>愿鹊桥永架，爱意长存</p>
</div>
</div>
<!-- 祝福弹窗 -->
<div id="blessModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 opacity-0 pointer-events-none transition-opacity duration-300">
<div class="bg-white rounded-2xl p-8 max-w-md w-full transform scale-95 transition-transform duration-300">
<div class="text-center mb-6">
<i class="fa fa-heart text-6xl text-love"></i>
<h2 class="text-2xl font-chinese text-night mt-4">七夕祝福</h2>
</div>
<textarea id="blessText" class="w-full p-4 border border-gray-300 rounded-lg h-32 mb-6 focus:outline-none focus:ring-2 focus:ring-love" placeholder="写下你的七夕祝福...">愿你在七夕这个浪漫的日子里，收获满满的幸福与爱意，与心爱的人共度美好时光，执子之手，与子偕老。</textarea>
<div class="flex justify-end space-x-4">
<button id="closeModal" class="px-6 py-2 border border-gray-300 rounded-full hover:bg-gray-100 transition-colors">取消</button>
<button id="shareBless" class="px-6 py-2 bg-love text-white rounded-full hover:bg-love/80 transition-colors">分享祝福</button>
</div>
</div>
</div>
<script>
// 创建星星
function createStars() {
const starsContainer = document.getElementById('stars');
const starCount = 150;
for (let i = 0; i < starCount; i++) {
const star = document.createElement('div');
star.classList.add('star', 'animate-twinkle');
// 随机大小
const size = Math.random() * 3 + 1;
star.style.width = `${size}px`;
star.style.height = `${size}px`;
// 随机位置
star.style.left = `${Math.random() * 100}vw`;
star.style.top = `${Math.random() * 100}vh`;
// 随机动画延迟和持续时间
star.style.animationDelay = `${Math.random() * 5}s`;
star.style.animationDuration = `${Math.random() * 3 + 2}s`;
starsContainer.appendChild(star);
}
}
// 创建飘落的爱心
function createHearts() {
const heartsContainer = document.getElementById('hearts');
const heartCount = 15;
for (let i = 0; i < heartCount; i++) {
createHeart(heartsContainer);
}
// 定时添加新爱心
setInterval(() => {
createHeart(heartsContainer);
}, 2000);
}
function createHeart(container) {
const heart = document.createElement('div');
heart.classList.add('heart', 'animate-fall');
// 随机大小
const size = Math.random() * 15 + 10;
heart.style.width = `${size}px`;
heart.style.height = `${size}px`;
// 随机位置
heart.style.left = `${Math.random() * 100}vw`;
heart.style.top = '-20px';
// 随机动画持续时间
const duration = Math.random() * 10 + 10;
heart.style.animationDuration = `${duration}s`;
// 随机不透明度
heart.style.opacity = Math.random() * 0.7 + 0.3;
container.appendChild(heart);
// 动画结束后移除
setTimeout(() => {
heart.remove();
}, duration * 1000);
}
// 弹窗功能
const blessBtn = document.getElementById('blessBtn');
const blessModal = document.getElementById('blessModal');
const closeModal = document.getElementById('closeModal');
const shareBless = document.getElementById('shareBless');
blessBtn.addEventListener('click', () => {
// 显示弹窗
blessModal.classList.remove('opacity-0', 'pointer-events-none');
blessModal.querySelector('div').classList.remove('scale-95');
blessModal.querySelector('div').classList.add('scale-100');
});
closeModal.addEventListener('click', closeModalFunc);
function closeModalFunc() {
blessModal.classList.add('opacity-0', 'pointer-events-none');
blessModal.querySelector('div').classList.remove('scale-100');
blessModal.querySelector('div').classList.add('scale-95');
}
// 点击弹窗外部关闭
blessModal.addEventListener('click', (e) => {
if (e.target === blessModal) {
closeModalFunc();
}
});
// 分享祝福
shareBless.addEventListener('click', () => {
const blessText = document.getElementById('blessText').value;
// 简单的分享提示，实际项目中可集成分享API
alert('祝福已准备好分享：\n' + blessText);
// 关闭弹窗
closeModalFunc();
// 显示一个爱心动画反馈
showHeartFeedback();
});
// 显示爱心反馈
function showHeartFeedback() {
const feedback = document.createElement('div');
feedback.classList.add('heart');
feedback.style.width = '50px';
feedback.style.height = '50px';
feedback.style.left = '50%';
feedback.style.top = '50%';
feedback.style.transform = 'translate(-50%, -50%) rotate(45deg) scale(0)';
feedback.style.zIndex = '100';
feedback.style.opacity = '1';
document.body.appendChild(feedback);
// 动画
setTimeout(() => {
feedback.style.transition = 'all 0.5s ease-out';
feedback.style.transform = 'translate(-50%, -50%) rotate(45deg) scale(1.5)';
feedback.style.opacity = '0';
}, 10);
// 移除元素
setTimeout(() => {
feedback.remove();
}, 1000);
}
// 页面加载完成后初始化
window.addEventListener('load', () => {
createStars();
createHearts();
});
</script>
</body>
</html>
方便获取更多学习、工作、生活信息请关注本站微信公众号
湘公网安备 43102202000103号