当前位置： 首页 > ds >正文

春日花园动画

ds 2025/8/13 11:31:44

1.色彩方案：

        使用柔和的渐变色：天空从浅蓝到淡蓝渐变

        草地采用嫩绿色渐变

        花朵使用粉红、淡黄、浅紫等柔和色调

        整体配色方案舒适、清新，避免强烈对比

2.动画元素：

        脉动的太阳：使用径向渐变和脉动阴影效果

        漂浮的云朵：两朵不同速度的云彩在天空中飘动

        飞舞的蝴蝶：带有翅膀扇动动画的蝴蝶在花丛间飞舞

        花瓣雨：随机生成、缓缓飘落的花瓣

        花朵：多种颜色的花朵点缀在草地上

3.视觉效果：

        半透明卡片带有模糊效果，增强层次感

        所有元素都带有柔和的阴影，增强立体感

        响应式设计，适配不同屏幕尺寸

4.实现细节：

        使用CSS动画实现所有动效

        花瓣雨效果使用JavaScript动态生成

        纯前端实现，无需外部资源

        代码注释清晰，便于理解和修改

5.页面展示：

6.代码重现：

<!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>/* 基础样式 */* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;background: linear-gradient(to bottom, #a1c4fd, #c2e9fb);min-height: 100vh;overflow: hidden;display: flex;flex-direction: column;align-items: center;justify-content: center;color: #5a7d59;}.container {max-width: 1200px;width: 100%;padding: 20px;text-align: center;z-index: 10;position: relative;}h1 {font-size: 3.5rem;margin-bottom: 20px;text-shadow: 3px 3px 6px rgba(0,0,0,0.1);color: #fff;letter-spacing: 2px;background: linear-gradient(to right, #ff7e5f, #feb47b);-webkit-background-clip: text;-webkit-text-fill-color: transparent;animation: titleGlow 3s infinite alternate;}.subtitle {font-size: 1.4rem;margin-bottom: 40px;color: #436850;max-width: 800px;margin-left: auto;margin-right: auto;text-shadow: 1px 1px 2px rgba(255,255,255,0.5);}/* 天空区域 */.sky {position: fixed;top: 0;left: 0;width: 100%;height: 70%;background: linear-gradient(to bottom, #87CEEB, #E0F7FA);z-index: 1;}/* 太阳 */.sun {position: absolute;top: 80px;right: 100px;width: 100px;height: 100px;background: radial-gradient(circle, #FFD700, #FFA500);border-radius: 50%;box-shadow: 0 0 60px #FFD700, 0 0 100px rgba(255, 215, 0, 0.5);animation: sunPulse 4s infinite alternate;}/* 云朵 */.cloud {position: absolute;background: white;border-radius: 50%;filter: drop-shadow(0 0 5px rgba(0,0,0,0.1));}.cloud-1 {top: 100px;left: 10%;width: 120px;height: 40px;animation: float 25s infinite linear;}.cloud-1:before, .cloud-1:after {content: '';position: absolute;background: white;border-radius: 50%;}.cloud-1:before {width: 60px;height: 60px;top: -30px;left: 20px;}.cloud-1:after {width: 50px;height: 50px;top: -20px;right: 20px;}.cloud-2 {top: 180px;left: 50%;width: 150px;height: 50px;animation: float 30s infinite linear reverse;}.cloud-2:before, .cloud-2:after {content: '';position: absolute;background: white;border-radius: 50%;}.cloud-2:before {width: 70px;height: 70px;top: -35px;left: 25px;}.cloud-2:after {width: 60px;height: 60px;top: -30px;right: 30px;}/* 草地 */.ground {position: fixed;bottom: 0;left: 0;width: 100%;height: 30%;background: linear-gradient(to top, #7bc043, #b5e655);z-index: 2;}/* 花朵容器 */.flowers {position: fixed;bottom: 30%;left: 0;width: 100%;height: 20%;z-index: 3;display: flex;justify-content: space-around;}/* 单朵花 */.flower {position: relative;width: 60px;height: 100px;}.stem {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 5px;height: 80px;background: #5a7d59;}.flower-head {position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 40px;height: 40px;}.petal {position: absolute;background: #ff9aa2;border-radius: 50%;width: 20px;height: 20px;}.petal:nth-child(1) { top: 0; left: 10px; }.petal:nth-child(2) { top: 10px; left: 0; background: #ffb7b2; }.petal:nth-child(3) { top: 10px; right: 0; background: #ffdac1; }.petal:nth-child(4) { bottom: 0; left: 10px; background: #e2f0cb; }.center {position: absolute;top: 10px;left: 10px;width: 20px;height: 20px;background: #ffd700;border-radius: 50%;z-index: 2;}/* 蝴蝶 */.butterfly {position: absolute;top: 50%;left: 10%;width: 40px;height: 30px;animation: butterflyFlight 20s infinite linear;z-index: 4;}.butterfly .left-wing, .butterfly .right-wing {position: absolute;width: 20px;height: 25px;background: linear-gradient(45deg, #ff9a9e, #fad0c4);border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;animation: butterflyWings 0.5s infinite alternate;}.butterfly .right-wing {left: 20px;background: linear-gradient(45deg, #fad0c4, #ff9a9e);}/* 花瓣雨 */.petal-fall {position: fixed;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 5;}.petal {position: absolute;background: linear-gradient(to bottom right, #ff9aa2, #ffb7b2);border-radius: 50% 50% 50% 0;width: 15px;height: 15px;opacity: 0.8;filter: drop-shadow(0 0 2px rgba(0,0,0,0.1));animation: fall linear infinite;}/* 信息卡片 */.info-card {background: rgba(255, 255, 255, 0.85);border-radius: 20px;padding: 25px;max-width: 600px;margin: 30px auto;box-shadow: 0 10px 30px rgba(0,0,0,0.1);backdrop-filter: blur(10px);border: 1px solid rgba(255,255,255,0.5);}.info-card h2 {color: #5a7d59;margin-bottom: 15px;font-size: 1.8rem;}.info-card p {color: #436850;line-height: 1.6;margin-bottom: 15px;text-align: left;}/* 动画效果 */@keyframes float {0% { transform: translateX(-100px); }100% { transform: translateX(calc(100vw + 100px)); }}@keyframes butterflyFlight {0% { transform: translate(0, 0) rotate(0deg); }25% { transform: translate(200px, -100px) rotate(10deg); }50% { transform: translate(400px, 50px) rotate(0deg); }75% { transform: translate(600px, -150px) rotate(-10deg); }100% { transform: translate(1000px, 0) rotate(0deg); }}@keyframes butterflyWings {0% { transform: rotate(0deg); }100% { transform: rotate(10deg); }}@keyframes fall {to { transform: translateY(100vh) rotate(360deg); }}@keyframes sunPulse {0% { box-shadow: 0 0 60px #FFD700, 0 0 100px rgba(255, 215, 0, 0.5); }100% { box-shadow: 0 0 90px #FFD700, 0 0 140px rgba(255, 215, 0, 0.7); }}@keyframes titleGlow {0% { text-shadow: 3px 3px 6px rgba(0,0,0,0.1); }100% { text-shadow: 3px 3px 15px rgba(255, 255, 255, 0.8); }}/* 响应式设计 */@media (max-width: 768px) {h1 { font-size: 2.5rem; }.subtitle { font-size: 1.1rem; }.sun { width: 70px; height: 70px; top: 50px; right: 50px; }}</style>
</head>
<body><!-- 天空区域 --><div class="sky"><!-- 太阳 --><div class="sun"></div><!-- 云朵 --><div class="cloud cloud-1"></div><div class="cloud cloud-2"></div><!-- 蝴蝶 --><div class="butterfly"><div class="left-wing"></div><div class="right-wing"></div></div></div><!-- 草地 --><div class="ground"></div><!-- 花朵 --><div class="flowers"><div class="flower" style="left: 10%;"><div class="stem"></div><div class="flower-head"><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="center"></div></div></div><div class="flower" style="left: 30%;"><div class="stem"></div><div class="flower-head"><div class="petal" style="background: #c7ceea;"></div><div class="petal" style="background: #e2f0cb;"></div><div class="petal" style="background: #ffb7b2;"></div><div class="petal" style="background: #ffdac1;"></div><div class="center" style="background: #ff9e80;"></div></div></div><div class="flower" style="left: 50%;"><div class="stem"></div><div class="flower-head"><div class="petal" style="background: #ffb7b2;"></div><div class="petal" style="background: #ffdac1;"></div><div class="petal" style="background: #e2f0cb;"></div><div class="petal" style="background: #b5ead7;"></div><div class="center" style="background: #ff9e80;"></div></div></div><div class="flower" style="left: 70%;"><div class="stem"></div><div class="flower-head"><div class="petal" style="background: #b5ead7;"></div><div class="petal" style="background: #c7ceea;"></div><div class="petal" style="background: #ffdac1;"></div><div class="petal" style="background: #ffb7b2;"></div><div class="center" style="background: #ff9e80;"></div></div></div><div class="flower" style="left: 90%;"><div class="stem"></div><div class="flower-head"><div class="petal" style="background: #e2f0cb;"></div><div class="petal" style="background: #ffb7b2;"></div><div class="petal" style="background: #b5ead7;"></div><div class="petal" style="background: #c7ceea;"></div><div class="center" style="background: #ffd700;"></div></div></div></div><!-- 花瓣雨效果 --><div class="petal-fall" id="petal-container"></div><!-- 主要内容 --><div class="container"><h1>春日花园</h1><p class="subtitle">感受春天的气息，花朵绽放，蝴蝶飞舞，阳光温暖的春日花园</p><div class="info-card"><h2>春日花园设计说明</h2><p>这个春日主题动画页面采用了柔和的色彩搭配，以传达春天的温暖与生机：</p><p>• <strong>天空渐变</strong>：使用从 #87CEEB 到 #E0F7FA 的渐变，营造出春日清晨的清新感</p><p>• <strong>草地设计</strong>：底部绿色渐变草地，从 #7bc043 到 #b5e655，表现新生小草的鲜嫩</p><p>• <strong>花朵元素</strong>：多种柔和色彩的花朵（粉红、淡黄、浅紫）搭配黄色花蕊，展现花园的多样性</p><p>• <strong>动画效果</strong>：飘动的云朵、飞舞的蝴蝶、花瓣雨和脉动的太阳，让整个场景充满生机</p><p>• <strong>色彩搭配</strong>：整体采用低饱和度的柔和色调，避免强烈对比，营造舒适视觉体验</p></div></div><script>// 创建花瓣雨效果function createPetals() {const container = document.getElementById('petal-container');const petalCount = 50;for (let i = 0; i < petalCount; i++) {const petal = document.createElement('div');petal.classList.add('petal');// 随机位置const startLeft = Math.random() * 100;petal.style.left = `${startLeft}vw`;// 随机大小const size = 5 + Math.random() * 10;petal.style.width = `${size}px`;petal.style.height = `${size}px`;// 随机颜色const colors = ['#ff9aa2', '#ffb7b2', '#ffdac1', '#e2f0cb', '#b5ead7'];petal.style.background = `linear-gradient(to bottom right, ${colors[Math.floor(Math.random() * colors.length)]}, ${colors[Math.floor(Math.random() * colors.length)]})`;// 随机动画时长const duration = 10 + Math.random() * 20;petal.style.animationDuration = `${duration}s`;// 随机延迟const delay = Math.random() * 15;petal.style.animationDelay = `${delay}s`;container.appendChild(petal);}}// 页面加载完成后执行window.addEventListener('load', createPetals);</script>
</body>
</html>
http://www.xdnf.cn/news/17814.html

相关文章：

  • 9. React组件生命周期
  • linux远程部署dify和mac本地部署dify
  • 机器学习—— TF-IDF文本特征提取评估权重 + Jieba 库进行分词（以《红楼梦》为例）
  • 能刷java题的网站
  • ROS教育中自动驾驶机器人的技术融合与技术创新
  • 如何将 AGV 叉车成功集成到仓库自动化系统中？
  • Apache 服务器基础配置与虚拟主机部署
  • AI智能体如何从错误中学习：反思机制详解
  • Flutter ExpansionPanel组件(可收缩的列表)
  • 云原生作业(tomcat)
  • 异或和查询
  • echarts配置项详细解释
  • C99中的变长数组（VLA）
  • THCV215一种高速视频数据收发器，采用低电压差分信号(LVDS)技术支持高速串行数据传输，支持1080p/60Hz高分辨率传输
  • 计算机网络---默认网关（Default Gateway）
  • C++ Rust与Go
  • Vue接口平台小功能——发送报告到飞书
  • 计算机网络摘星题库800题笔记 第4章 网络层
  • nurbs曲线的matlab
  • 10. React组件间的通信
  • 数据分析基本内容（第二十节课内容总结）
  • Milvus入门：开源向量数据库，解锁大模型时代的高效检索
  • kafka初步介绍
  • 不废话，UE5极速云渲染操作方法
  • STM32_bug总结（TIM定时中断进不去和只进1次）
  • MyBatis持久层实现
  • 全面解析MySQL(5)——“索引、事务、JDBC”三大核心
  • PostgreSQL——数据查询
  • 【K8s】部署安装K8s为什么要关闭swap分区？
  • Day50--图论--98. 所有可达路径（卡码网），797. 所有可能的路径