当前位置: 首页 > news >正文

炎热的夏天

1. 色彩方案

        天空渐变:从浅蓝(#a8d8ff)到更浅的蓝(#d4f0ff),模拟夏日晴空

        草地:使用淡绿色(#8bc34a)到浅绿(#c5e1a5)的渐变

        太阳:采用黄色渐变(#fff9c4 → #ffeb3b → #ff9800)并添加发光效果

        整体色调:柔和不刺眼,符合"颜色轻一点"的要求

2. 夏日元素

        太阳:圆形放射渐变,带有发光动画效果

        云朵:白色蓬松形状,使用模糊效果增强蓬松感

        树木:棕色树干和绿色树冠,多层叠加营造立体感

        花朵:粉色花瓣和黄色花蕊,添加摇摆动画

3. 动画效果

        云朵飘动:使用无限循环的线性动画模拟云朵移动

        花朵摇曳:摇摆动画模拟微风吹拂效果

        太阳发光:柔和的光晕变化动画

        整体效果:所有动画都保持缓慢、轻柔的节奏

4. 视觉层次

        使用z-index创建深度:天空在最底层,云朵在中间,地面和植物在最上层

        半透明元素:使用rgba和透明度创建柔和视觉效果

        模糊效果:使用backdrop-filter实现毛玻璃效果卡片

5. 响应式设计

        在小屏幕上调整布局,信息卡片移动到下方

        文字大小自适应不同屏幕尺寸

        元素位置相对定位,适应不同宽高比

6.截图展示

7.代码重现

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>夏日梦幻可视化</title><link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet"><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'ZCOOL QingKe HuangYou', cursive;background: linear-gradient(to bottom, #a8d8ff, #d4f0ff);height: 100vh;overflow: hidden;display: flex;justify-content: center;align-items: center;color: #2c3e50;}.container {position: relative;width: 90%;max-width: 1000px;height: 85vh;background: rgba(255, 255, 255, 0.2);backdrop-filter: blur(10px);border-radius: 20px;box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);overflow: hidden;display: flex;flex-direction: column;}/* 标题样式 */.header {text-align: center;padding: 20px;z-index: 10;}.title {font-family: 'Ma Shan Zheng', cursive;font-size: 3.5rem;color: #f39c12;text-shadow: 0 0 10px rgba(243, 156, 18, 0.3);margin-bottom: 10px;letter-spacing: 2px;}.subtitle {font-size: 1.4rem;color: #3498db;max-width: 700px;margin: 0 auto;line-height: 1.6;}/* 主要内容区域 */.content {display: flex;flex: 1;padding: 20px;position: relative;}/* 场景元素 */.scene {position: absolute;width: 100%;height: 100%;top: 0;left: 0;}/* 太阳设计 */.sun {position: absolute;top: 50px;right: 100px;width: 100px;height: 100px;background: radial-gradient(circle, #fff9c4 0%, #ffeb3b 70%, #ff9800 100%);border-radius: 50%;box-shadow: 0 0 40px #ffeb3b, 0 0 80px rgba(255, 235, 59, 0.5);z-index: 2;animation: sun-glow 3s infinite alternate;}/* 云朵设计 */.cloud {position: absolute;background: rgba(255, 255, 255, 0.95);border-radius: 50%;filter: blur(1px);z-index: 1;}.cloud-1 {width: 120px;height: 50px;top: 80px;left: 10%;animation: float 25s infinite linear;}.cloud-2 {width: 180px;height: 70px;top: 150px;left: 25%;animation: float 35s infinite linear reverse;}.cloud-3 {width: 150px;height: 60px;top: 40px;left: 60%;animation: float 30s infinite linear;}/* 地面设计 */.ground {position: absolute;bottom: 0;width: 100%;height: 40%;background: linear-gradient(to top, #8bc34a, #c5e1a5);border-radius: 50% 50% 0 0;z-index: 3;}/* 树木设计 */.tree {position: absolute;bottom: 30%;z-index: 4;}.trunk {position: absolute;background: #8d6e63;width: 15px;height: 120px;bottom: 0;left: 50%;transform: translateX(-50%);border-radius: 5px;}.tree-1 {left: 20%;}.tree-2 {left: 50%;}.tree-3 {left: 80%;}.foliage {position: absolute;background: #81c784;border-radius: 50%;bottom: 120px;left: 50%;transform: translateX(-50%);box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);}.foliage-large {width: 120px;height: 120px;}.foliage-medium {width: 100px;height: 100px;bottom: 140px;}.foliage-small {width: 80px;height: 80px;bottom: 160px;}/* 花朵设计 */.flower {position: absolute;bottom: 30%;z-index: 5;}.flower-1 {left: 30%;animation: sway 4s infinite ease-in-out;}.flower-2 {left: 40%;animation: sway 5s infinite ease-in-out reverse;}.flower-3 {left: 70%;animation: sway 4.5s infinite ease-in-out;}.stem {position: absolute;background: #388e3c;width: 4px;height: 60px;bottom: 0;left: 50%;transform: translateX(-50%);}.petals {position: absolute;bottom: 60px;left: 50%;transform: translateX(-50%);}.petal {position: absolute;width: 15px;height: 15px;border-radius: 50%;background: #f48fb1;}.center {position: absolute;width: 10px;height: 10px;background: #ffd54f;border-radius: 50%;bottom: 0;left: 50%;transform: translateX(-50%);z-index: 2;}/* 信息卡片 */.info-card {background: rgba(255, 255, 255, 0.85);border-radius: 15px;padding: 25px;max-width: 450px;z-index: 10;box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);backdrop-filter: blur(5px);margin-left: 30px;}.info-card h2 {color: #2e7d32;margin-bottom: 20px;font-size: 2.2rem;font-family: 'Ma Shan Zheng', cursive;}.info-card p {line-height: 1.8;margin-bottom: 15px;font-size: 1.1rem;}.features {margin-top: 20px;padding-left: 20px;}.features li {margin-bottom: 12px;position: relative;}.features li::before {content: "☀️";position: absolute;left: -25px;}/* 动画效果 */@keyframes float {0% { transform: translateX(-100px); }100% { transform: translateX(calc(100vw + 200px)); }}@keyframes sway {0%, 100% { transform: rotate(-2deg); }50% { transform: rotate(2deg); }}@keyframes sun-glow {0% { box-shadow: 0 0 40px #ffeb3b, 0 0 80px rgba(255, 235, 59, 0.5); }100% { box-shadow: 0 0 60px #ffeb3b, 0 0 100px rgba(255, 235, 59, 0.7); }}/* 响应式设计 */@media (max-width: 768px) {.content {flex-direction: column;}.info-card {margin: 20px 0 0 0;max-width: 100%;}.title {font-size: 2.5rem;}.subtitle {font-size: 1.1rem;}}</style>
</head>
<body><div class="container"><div class="header"><h1 class="title">夏日梦幻之境</h1><p class="subtitle">柔和的色彩、轻盈的动画,带您进入一个宁静美好的夏日世界</p></div><div class="content"><div class="scene"><!-- 太阳 --><div class="sun"></div><!-- 云朵 --><div class="cloud cloud-1"></div><div class="cloud cloud-2"></div><div class="cloud cloud-3"></div><!-- 地面 --><div class="ground"></div><!-- 树木 --><div class="tree tree-1"><div class="trunk"></div><div class="foliage foliage-large"></div><div class="foliage foliage-medium"></div><div class="foliage foliage-small"></div></div><div class="tree tree-2"><div class="trunk"></div><div class="foliage foliage-large"></div><div class="foliage foliage-medium"></div></div><div class="tree tree-3"><div class="trunk"></div><div class="foliage foliage-large"></div><div class="foliage foliage-medium"></div><div class="foliage foliage-small"></div></div><!-- 花朵 --><div class="flower flower-1"><div class="stem"></div><div class="petals"><div class="petal" style="top: -5px; left: -20px;"></div><div class="petal" style="top: -5px; left: 5px;"></div><div class="petal" style="top: 10px; left: -10px;"></div><div class="center"></div></div></div><div class="flower flower-2"><div class="stem"></div><div class="petals"><div class="petal" style="top: -5px; left: -20px;"></div><div class="petal" style="top: -5px; left: 5px;"></div><div class="petal" style="top: 10px; left: -10px;"></div><div class="center"></div></div></div><div class="flower flower-3"><div class="stem"></div><div class="petals"><div class="petal" style="top: -5px; left: -20px;"></div><div class="petal" style="top: -5px; left: 5px;"></div><div class="petal" style="top: 10px; left: -10px;"></div><div class="center"></div></div></div></div><div class="info-card"><h2>夏日视觉设计解析</h2><p>这个可视化界面采用了柔和的夏日色彩,营造出宁静舒适的氛围:</p><ul class="features"><li><strong>色彩方案</strong>:使用浅蓝色天空、淡绿色草地和柔和的黄色太阳,整体色调轻盈舒适</li><li><strong>层次设计</strong>:通过z-index创建深度感,从背景到前景元素层次分明</li><li><strong>柔和动画</strong>:云朵缓慢飘动、树叶轻轻摇曳、阳光柔和闪烁</li><li><strong>自然元素</strong>:树木、花朵和云朵等元素营造夏日氛围</li><li><strong>半透明效果</strong>:使用透明度和模糊效果创造梦幻质感</li><li><strong>响应式设计</strong>:适配不同屏幕尺寸,确保良好体验</li></ul><p>整个设计旨在唤起夏日宁静美好的感受,让用户在视觉上感受到清凉舒适的夏日氛围。</p></div></div></div>
</body>
</html>
http://www.dtcms.com/a/330851.html

相关文章:

  • SQL181 第二快/慢用时之差大于试卷时长一半的试卷
  • 掌握MATLAB三维可视化:从基础到实战技巧
  • Redis 从入门到生产:数据结构、持久化、集群、工程实践与避坑(含 Node.js/Python 示例)
  • jenkins在windows配置sshpass
  • 构建Node.js单可执行应用(SEA)的方法
  • 【前端工具】使用 Node.js 脚本实现项目打包后自动压缩
  • Go语言defer机制详解与应用
  • 机器学习介绍
  • 预训练模型在机器翻译中的应用:迁移学习的优势详解
  • 华为实验WLAN 基础配置随练
  • dkms安装nvidia驱动和多内核支持
  • 【motion】GIF 转mp4及ubuntu的VLC播放
  • 数据结构初阶(14)排序算法—交换排序(冒泡)(动图演示)
  • 基于SpringBoot+Vue的房屋匹配系统(WebSocket实时通讯、协同过滤算法、地图API、Echarts图形化分析)
  • iOS App TestFlight 上架全流程案例,从 0 到 1 完成内测分发
  • C#通过TCP_IP与PLC通信
  • vue部署正式环境上传nginx后遇到的问题
  • 分享10个ai生成ppt网站(附ai生成ppt入口)
  • ZigBee入门与提高(3)—— ZigBee协议初识
  • Wireshark中常见协议
  • 重学JS-002 --- JavaScript算法与数据结构(二)JavaScript 基础知识
  • MFT 在零售行业的实践案例与场景:加速文件集成与业务协作的高效方案
  • day30 TCP通信
  • 财务自动化软件敏感数据泄露风险评估与防护措施
  • B站 韩顺平 笔记 (Day 18)
  • C++ 仿RabbitMQ实现消息队列项目
  • 使用uniapp自定义组件双重支付密码
  • RabbitMQ面试精讲 Day 22:消息模式与最佳实践
  • 8.14网络编程——TCP通信基础
  • 计算机视觉第一课opencv(二)保姆级教