sk-b1da2a945c2c2d16243f59457f1dfe50681dfb2bf1a4618de4bb803bcc5740f0 ai.dianshangbat.cn Sub2API - AI API Gateway 这使用起来感觉怪怪的，改项目老改的面目全非逻辑混乱，我都无语了，但是我又不会测 是不是真的gpt5.4 xhigh ，来个佬帮帮孩子吧 13 个帖子 - 6 位参与者 阅读完整话题
wallstreetcn.com 一个时代落幕：三星关闭旧款内存订单窗口，行业加速向下一代内存迁移 三星电子正式终止LPDDR4和LPDDR4X移动DRAM的新增订单接收，标志着这两款量产逾十年的主流内存产品进入生命周期终结阶段。相关产线预计明年一季度启动转换，三星借此加速向更高性能制程迁移。 1 个帖子 - 1 位参与者 阅读完整话题
正常模式下 左侧是文件目录树，右侧是AI对话。 SOLO模式下 非要把这俩反过来，还不能手动改。 5 个帖子 - 4 位参与者 阅读完整话题
https://cn.wsj.com/articles/meta计划新一轮裁员-5月或裁员约8-000人-路透-e8d9b3c4 4 个帖子 - 4 位参与者 阅读完整话题
网页版 App Store 之前可以通过修改网址中的 /cn/ 为其它地区代码，如 /us/ 达到浏览美区商店内容，现在大陆 IP 尝试访问外区商店会被 302 重定向回国区的 Today 页面。 2 个帖子 - 2 位参与者 阅读完整话题
IT之家 4 月 17 日消息，据科技媒体 GSMArena 今天报道，传音现已官宣 Tecno Pop X 5G 手机将在 4 月 20 日发布，部分参数已经在亚马逊商品页面曝光。 据介绍， 这款手机将配备 6500mAh 大电池 ，支持 45W 有线快充。处理器型号暂未公布，提供 4GB/6GB 两种内存版本。 设计方面，该机的后摄模组配备航空级 6 系铝合金，支持 IP64 Pro 级防尘防水，通过 MIL-STD-810H 认证。主打 USRP 3.0 技术，网络速度最高可提升 8 倍，可实现更流畅的视频播放、更快下载速度、更稳定连接体验。 此外，这款手机还支持将内存“扩展”至 18GB，可承受 1.5 米高度跌落撞击。集成 AI 通话降噪功能，售价预计低于 15000 印度卢比（IT之家注：现汇率约合 1095 元人民币）。
screencapture-link-pixcat-cn-new-2026-04-17-16_10_27.pdf (348.8 KB) 地址： https://link.pixcat.cn/new 1 个帖子 - 1 位参与者 阅读完整话题
{ “env”: { “ANTHROPIC_AUTH_TOKEN”: “sk-”, “ANTHROPIC_BASE_URL”: “ https://a-ocnfniawgw.cn-shanghai.fcapp.run ”, “CLAUDE_CODE_ATTRIBUTION_HEADER”: “0”, “CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC”: “1”, “CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS”: “1” }, “includeCoAuthoredBy”: false, “model”: “opus[1m]” } 这个配置一直在出现重试的问题 4 个帖子 - 4 位参与者 阅读完整话题
我全程没手写一行代码，只用 Trae + 下面这套现成提示词，就做出了功能完整的全屏滚动字幕小程序。不用懂前端、不用懂 Canvas、不用调样式，复制粘贴就能生成全套代码，直接上架微信。 首页：5 种预设样式一键切换（滚动字幕、动感摇滚、表白神器、舞台荧光、寻人牌） 展示页：全屏竖排文字滚动，支持荧光 / 闪烁 / 故障风等特效 可自定义：文字、颜色、字号、字体、滚动速度 底部控制面板 + 右侧滑出设置栏 常用语、历史记录、用户配置自动保存 微信开发者工具直接运行，零修改、零报错 1. 一键生成完整小程序 创建一个"大字君"类型的微信小程序项目，功能要求如下： 页面结构 首页（pages/index）- 模板选择页面 5个预设样式按钮：滚动字幕、动感摇滚、表白神器、舞台荧光、寻人牌 输入框可自定义文字 展示页（pages/display）- 文字展示页面 全屏 Canvas 竖排显示滚动文字 底部悬浮控制面板 右侧滑出设置侧边栏 核心功能 Canvas 文字滚动 文字竖排显示（旋转90度） 滚动速度可调：0(停止)/0.5x/1x/2x 字体大小可选：100/150/200/260 支持的字体：渔阳、金榜、黑体、方圆、大楷、刀隶 文字效果 无效果（none） 闪烁（blink）- 文字交替显示/隐藏 荧光（glow）- 文字发光效果 shadowBlur=30 故障风（glitch）- RGB分离偏移效果 描边（stroke）- 文字边缘描边 阴影（shadow）- 文字阴影效果 预设样式配置 BUTTON_STYLES = { ‘滚动字幕’: { textColor: ‘ #ecf0f1 ’, bgColor: ‘ #2c3e50 ’, textEffect: ‘none’ }, ‘动感摇滚’: { textColor: ‘ #000000 ’, bgColor: ‘ #f5576c ’, textEffect: ‘glitch’ }, ‘表白神器’: { textColor: ‘ #ffffff ’, bgColor: ‘ #ff6b9d ’, textEffect: ‘glow’ }, ‘舞台荧光’: { textColor: ‘ #0ff ’, bgColor: ‘ #1a1a2e ’, textEffect: ‘glow’ }, ‘寻人牌’: { textColor: ‘ #8b4513 ’, bgColor: ‘ #fff8e7 ’, textEffect: ‘none’ } } 控制面板 主页/设置按钮 文字输入框（实时输入确认） 常用语横向滚动列表 添加常用语按钮 背景使用 rgba(0, 0, 0, 0.6) 半透明黑色，顶部圆角 24rpx 设置面板（侧边栏） 字体颜色选择器（8种颜色） 字体大小选择（4种） 字体选择（6种字体） 播放速度选择（4档） 文字效果选择（6种） 背景颜色选择器（8种颜色） 数据存储 用户配置：wx.getStorageSync(‘user_config’) 保存：fontSize, speed, textColor, textEffect, bgColor, fontFamily, phrases, lastText 历史记录：wx.getStorageSync(‘history_texts’) 最多保存50条，带时间戳 去重处理（相同文字移到顶部） 生成新页面（需要加页面时用） 创建一个微信小程序页面，包含 wxml、wxss、js、json 四个文件，使用数据驱动、规范命名、事件绑定，逻辑清晰可直接运行。 实现 Canvas 竖排滚动动画 在微信小程序中实现 Canvas 竖排文字滚动动画，支持闪烁、荧光、故障风、描边、阴影等效果，使用标准动画循环与竖排渲染方式，代码稳定不卡顿。 实现用户配置存储 在微信小程序中实现用户配置保存功能，自动存储字号、速度、颜色、效果、字体等设置，页面隐藏时自动保存，打开时自动读取。 实现历史记录管理 实现文字历史记录功能，最多保存 50 条，自动去重，新记录置顶，带时间戳，本地持久化存储。 实现右侧设置面板 创建设置侧边栏，支持字体颜色、字号、速度、文字效果、背景颜色选择，界面美观、操作简单。 实现常用语功能 实现常用语添加、删除、展示功能，支持弹窗编辑，数据本地保存。 实现预设样式按钮 创建 5 种预设样式按钮，一键切换文字颜色、背景色与特效，适配大字君项目使用 按照顺序将提示词发给 Trae，大体功能基本就出来了，最后只用根据自己的喜好写点页面和交互的提示词微调就可以了。 微信小程序开发规范 项目初始化 app.json 包含 pages、window、style、sitemapLocation 每个页面必须：wxml + wxss + js + json Canvas 规范 使用 type=“2d” canvas initCanvas 在 onReady 执行 动画变量挂 this，不进 data 用 requestAnimationFrame 循环 数据存储 用户配置：user_config 历史记录：history_texts onHide 自动保存 文字效果 blink：显隐切换 glow：shadowBlur=30 glitch：RGB分层偏移 stroke：描边 shadow：阴影 附小程序体验码： 1 个帖子 - 1 位参与者 阅读完整话题
本周Epic送了The Stone of Madness《疯狂之石》游戏 https://store.epicgames.com/zh-CN/p/the-stone-of-madness-7b22f3 《疯狂之石》 《疯狂之石》是一款设定在 18 世纪西班牙修道院的实时战术潜行游戏。这座位于比利牛斯山脉、饱经风霜的耶稣会修道院，既是疯人院，也是宗教裁判所的监狱。五名饱受残酷惩罚、疯狂与绝望折磨的囚犯，将汇聚各自的技能与资源，直面内心恐惧、抵御精神错乱、揭开修道院的神秘面纱，并寻找逃脱之路。 逃离这座戒备森严的修道院绝非易事，但艾格尼丝、莱奥诺拉、爱德华多、阿米莉亚和阿尔弗雷德决心坚持到底。轮流操控这五名角色，运用他们独特的可升级技能来施放法术、刺杀目标、分散敌人注意、震慑恶灵、探索难以抵达的区域等。 ps. 我感觉这个画风蛮不错的，有中世纪的风格，感兴趣的佬可以领一下~ 2 个帖子 - 2 位参与者 阅读完整话题
https://online-video-cutter.com/cn/remove-logo 2 个帖子 - 2 位参与者 阅读完整话题
准备搭建个newapi对接付费的中转站用来团队使用，但这类型的应用不适合用公司的域名，自己备案也麻烦。不知道对接低价中转站有没有风险，所以不想备案。佬们有价格美丽，稳定的CN2线路的国际网络的服务器提供商么，大陆访问有网络优化的 求佬们指教 5 个帖子 - 5 位参与者 阅读完整话题
世界自然保护联盟（IUCN）发布公报，南极洲两个最具代表性的物种——帝企鹅和南极毛皮海狮因数量快速、急剧减少，已被列入濒危物种红色名录濒危等级。IUCN 将物种生存状况划分为 9 个等级：灭绝、野外灭绝、极危、濒危、易危、近危、无危、数据缺乏、未予评估。IUCN 公报指出，根据卫星图像，2009 年至 2018 年间，帝企鹅种群数量减少了约 10%，相当于 2 万多只成年帝企鹅消失了。南极气候变化导致海冰发生变化，预测到 2180 年代，帝企鹅的数量将减半。南极毛皮海狮因食物短缺导致数量自 2000 年以来减少了 50%。气候变化致使海洋温度上升和海冰面积缩减，磷虾向更深、更冷的水域迁移，导致南极毛皮海狮的食物来源减少。
https://x.com/AlibabaGroup/status/2044634595937882394?s=20 happyoyster.cn Happy Oyster 3 个帖子 - 3 位参与者 阅读完整话题
sk-cp-zyBGE941woaB9dU1j_2AO5V9XyoOpyza7ICldLRH1phxs6VNZvLgVBgUO4B4OYulVDWrAXBw8jD8MNFVZ9s-cNPOWNQt0kjYhSXPKW0-dzMijkQSbYTT2Ng 大概还有10天到期，经常会负载满了，官方不作为，服了。 11 个帖子 - 6 位参与者 阅读完整话题
TRAE v3.3.51 版本正式发布 其中：自定义模型支持 自定义 baseURL ：用户在添加/编辑自定义模型时支持配置自定义 baseURL。 给佬友们提个醒，添加模型的时候选择使用其他模型然后输入自己的模型ID 重要 ：baseURL要填写完整的URL 支持anthropic的URL完整地址结尾是/anthropic/v1/messages 支持openai的URL完整地址结尾是/openai/v1/chat/completions 6 个帖子 - 5 位参与者 阅读完整话题
https://www.inewsweek.cn/society/2026-04-14/29762.shtml 文章讲的是韩国，怎么把韩国换成中国也没什么问题 难怪国家在教育方面要反内卷降负担，也是怕变成韩国癫狂内卷的教育成本，摧毁生育意愿。 未来我们能过的了老龄化这道坎么，如果未能扭转走上韩国老路，我这种依赖养老金的穷逼是不是没法养老了 还是说能期待一波机器人工业革命，到时候可以机器人养老。或者能把大a也加入养老定投计划，因为未来可能会有更多年轻人来炒股想赚块钱，能推高股价。 2 个帖子 - 2 位参与者 阅读完整话题
CNN – 15 Apr 26 Trump says he’ll fire Powell next month if he stays in his role at the Fed |... President Donald Trump said he will fire Federal Reserve Chair Jerome Powell if he does not step aside when his term at the helm of the central bank expires next month. 唐纳德·特朗普总统表示，如果美联储主席杰罗姆·鲍威尔不在其下个月的央行主席任期届满后辞职，他将解雇鲍威尔。 “那我就不得不解雇他了，”特朗普周三在接受福克斯商业频道主持人玛丽亚·巴蒂罗姆采访时，被问及鲍威尔是否会继续留在美联储工作时说道。 https://www.axios.com/2026/04/15/fed-powell-warsh-interest-rates 2 个帖子 - 2 位参与者 阅读完整话题
CNBC – 15 Apr 26 Spirit Airlines could liquidate as early as this week, sources say The carrier is facing the added challenge of a spike in the price of fuel. Fuel is airlines' biggest expense after labor. Skift – 15 Apr 26 Spirit Could Liquidate This Week as Trustee Seeks to Delay Bankruptcy Exit Spirit could liquidate as soon as this week due to high fuel prices making it harder for the carrier to execute its post-bankruptcy plans. Est. reading time: 2 minutes 2 个帖子 - 2 位参与者 阅读完整话题
第一反应：快，好tm快 洗车问题 天气卡片 html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>iOS 18 Style Weather Cards</title> <script src="https://cdn.tailwindcss.com"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap'); body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #000; overflow: hidden; /* Prevent scroll on the main body */ } /* iOS 18 Glassmorphism Utilities */ .glass-panel { background: rgba(30, 30, 30, 0.6); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); } .glass-card { background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.15); border-top: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease; } .glass-card:hover { transform: scale(1.03) translateY(-5px); box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.4); border-color: rgba(255, 255, 255, 0.3); z-index: 10; } /* Custom Scrollbar for horizontal container */ .hide-scroll::-webkit-scrollbar { display: none; } .hide-scroll { -ms-overflow-style: none; scrollbar-width: none; } /* Weather Animations */ /* Sun */ @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pulse-glow { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } } .sun-rays { animation: spin-slow 12s linear infinite; } .sun-core { animation: pulse-glow 3s ease-in-out infinite; } /* Wind */ @keyframes wind-flow { 0% { transform: translateX(-120%) opacity(0); } 50% { opacity: 0.6; } 100% { transform: translateX(120%); opacity(0); } } .wind-line { position: absolute; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); border-radius: 999px; } /* Rain */ @keyframes rain-fall { 0% { transform: translateY(-20px) translateX(0px); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(120px) translateX(-10px); opacity: 0; } } .rain-drop { position: absolute; width: 2px; background: rgba(255, 255, 255, 0.6); border-radius: 2px; opacity: 0; } /* Snow */ @keyframes snow-fall { 0% { transform: translateY(-20px) translateX(0px) rotate(0deg); opacity: 0; } 20% { opacity: 0.8; } 100% { transform: translateY(140px) translateX(20px) rotate(180deg); opacity: 0; } } .snow-flake { position: absolute; background: white; border-radius: 50%; opacity: 0; filter: blur(1px); } /* Clouds */ @keyframes float-cloud { 0%, 100% { transform: translateX(0px); } 50% { transform: translateX(10px); } } .cloud-drift { animation: float-cloud 6s ease-in-out infinite; } /* Text Utilities */ .text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,0.3); } /* Background Gradient Animation */ .bg-gradient-anim { background: linear-gradient(-45deg, #0f172a, #1e1b4b, #312e81, #0f172a); background-size: 400% 400%; animation: gradientBG 15s ease infinite; } @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Card Specific Gradients */ .card-sunny { background: linear-gradient(180deg, rgba(253, 184, 19, 0.25) 0%, rgba(245, 158, 11, 0.1) 100%); } .card-windy { background: linear-gradient(180deg, rgba(148, 163, 184, 0.25) 0%, rgba(71, 85, 105, 0.1) 100%); } .card-rainy { background: linear-gradient(180deg, rgba(30, 58, 138, 0.35) 0%, rgba(15, 23, 42, 0.2) 100%); } .card-snowy { background: linear-gradient(180deg, rgba(56, 189, 248, 0.2) 0%, rgba(14, 165, 233, 0.1) 100%); } </style> </head> <body class="h-screen w-screen text-white flex flex-col items-center justify-center bg-gradient-anim relative"> <!-- Background Ambient Orbs --> <div class="absolute top-[-10%] left-[-10%] w-[500px] h-[500px] bg-purple-600 rounded-full mix-blend-screen filter blur-[120px] opacity-40 animate-pulse"></div> <div class="absolute bottom-[-10%] right-[-10%] w-[600px] h-[600px] bg-blue-600 rounded-full mix-blend-screen filter blur-[120px] opacity-40 animate-pulse" style="animation-duration: 8s;"></div> <!-- Main Container --> <main class="relative z-10 w-full max-w-7xl px-6 flex flex-col items-center"> <!-- Header --> <header class="mb-12 text-center space-y-2"> <h1 class="text-4xl md:text-5xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-white to-white/60">Weather</h1> <p class="text-white/50 text-lg font-medium tracking-wide">FORECAST OVERVIEW</p> </header> <!-- Cards Container (Horizontal Scroll on mobile, Grid on desktop) --> <div class="w-full overflow-x-auto hide-scroll pb-12 px-4"> <div class="flex md:grid md:grid-cols-4 gap-6 min-w-[1000px] md:min-w-0 mx-auto"> <!-- Card 1: Sunny --> <article class="glass-card glass-card-interactive card-sunny relative h-[420px] w-[240px] rounded-[32px] p-6 flex flex-col justify-between overflow-hidden group cursor-pointer select-none"> <!-- Top Info --> <div class="z-20"> <p class="text-white/70 font-semibold text-sm uppercase tracking-wider">Monday</p> <h2 class="text-3xl font-bold text-shadow mt-1">Sunny</h2> </div> <!-- Visual: Sun --> <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-40 h-40 z-10 pointer-events-none"> <!-- Rays --> <svg class="sun-rays w-full h-full text-yellow-400 opacity-60" viewBox="0 0 100 100" fill="none"> <circle cx="50" cy="50" r="20" fill="currentColor" fill-opacity="0.2" /> <path stroke="currentColor" stroke-width="4" stroke-linecap="round" d="M50 15V5M50 95V85M85 50H95M5 50H15M75.35 24.65L82.43 17.57M17.57 82.43L24.65 75.35M75.35 75.35L82.43 82.43M17.57 17.57L24.65 24.65" /> </svg> <!-- Core --> <div class="sun-core absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 bg-gradient-to-br from-yellow-300 to-orange-500 rounded-full blur-sm shadow-[0_0_40px_rgba(251,191,36,0.6)]"></div> </div> <!-- Bottom Info --> <div class="z-20 mt-auto"> <div class="flex items-end gap-2"> <span class="text-6xl font-light tracking-tighter">28°</span> </div> <div class="mt-4 space-y-2"> <div class="flex justify-between text-sm text-white/80 border-b border-white/10 pb-1"> <span>UV Index</span> <span class="font-semibold">High</span> </div> <div class="flex justify-between text-sm text-white/80 border-b border-white/10 pb-1"> <span>Humidity</span> <span class="font-semibold">32%</span> </div> </div> </div> </article> <!-- Card 2: Windy --> <article class="glass-card glass-card-interactive card-windy relative h-[420px] w-[240px] rounded-[32px] p-6 flex flex-col justify-between overflow-hidden group cursor-pointer select-none"> <!-- Top Info --> <div class="z-20"> <p class="text-white/70 font-semibold text-sm uppercase tracking-wider">Tuesday</p> <h2 class="text-3xl font-bold text-shadow mt-1">Windy</h2> </div> <!-- Visual: Wind --> <div class="absolute top-1/3 left-0 w-full h-32 z-10 pointer-events-none overflow-hidden" id="wind-container"> <!-- Wind lines injected by JS --> </div> <!-- Cloud --> <div class="absolute top-[35%] left-1/2 transform -translate-x-1/2 w-24 h-12 bg-white/20 rounded-full blur-xl cloud-drift z-0"></div> <svg class="absolute top-[35%] left-1/2 transform -translate-x-1/2 w-20 h-12 text-white/40 cloud-drift z-0" fill="currentColor" viewBox="0 0 24 24"><path d="M18.5 12A5.5 5.5 0 0 0 13 6.5c-.26 0-.51.02-.76.06A4.5 4.5 0 0 0 4 10.5 4.5 4.5 0 0 0 8.5 15h10a3.5 3.5 0 0 0 0-7z"/></svg> <!-- Bottom Info --> <div class="z-20 mt-auto"> <div class="flex items-end gap-2"> <span class="text-6xl font-light tracking-tighter">19°</span> </div> <div class="mt-4 space-y-2"> <div class="flex justify-between text-sm text-white/80 border-b border-white/10 pb-1"> <span>Wind</span> <span class="font-semibold">24 km/h</span> </div> <div class="flex justify-between text-sm text-white/80 border-b border-white/10 pb-1"> <span>Direction</span> <span class="font-semibold">NW</span> </div> </div> </div> </article> <!-- Card 3: Heavy Rain --> <article class="glass-card glass-card-interactive card-rainy relative h-[420px] w-[240px] rounded-[32px] p-6 flex flex-col justify-between overflow-hidden group cursor-pointer select-none"> <!-- Top Info --> <div class="z-20"> <p class="text-white/70 font-semibold text-sm uppercase tracking-wider">Wednesday</p> <h2 class="text-3xl font-bold text-shadow mt-1">Storm</h2> </div> <!-- Visual: Rain & Cloud --> <div class="absolute top-[25%] left-0 w-full h-48 z-10 pointer-events-none overflow-hidden" id="rain-container"> <!-- Rain drops injected by JS --> </div> <!-- Dark Cloud --> <div class="absolute top-[22%] left-1/2 transform -translate-x-1/2 w-32 h-16 bg-slate-800/60 rounded-full blur-xl z-0"></div> <svg class="absolute top-[20%] left-1/2 transform -translate-x-1/2 w-28 h-16 text-slate-400/50 z-0" fill="currentColor" viewBox="0 0 24 24"><path d="M18.5 12A5.5 5.5 0 0 0 13 6.5c-.26 0-.51.02-.76.06A4.5 4.5 0 0 0 4 10.5 4.5 4.5 0 0 0 8.5 15h10a3.5 3.5 0 0 0 0-7z"/></svg> <!-- Bottom Info --> <div class="z-20 mt-auto"> <div class="flex items-end gap-2"> <span class="text-6xl font-light tracking-tighter">14°</span> </div> <div class="mt-4 space-y-2"> <div class="flex justify-between text-sm text-white/80 border-b border-white/10 pb-1"> <span>Precip</span> <span class="font-semibold">90%</span> </div> <div class="flex justify-between text-sm text-white/80 border-b border-white/10 pb-1"> <span>Pressure</span> <span class="font-semibold">998 hPa</span> </div> </div> </div> </article> <!-- Card 4: Blizzard --> <article class="glass-card glass-card-interactive card-snowy relative h-[420px] w-[240px] rounded-[32px] p-6 flex flex-col justify-between overflow-hidden group cursor-pointer select-none"> <!-- Top Info --> <div class="z-20"> <p class="text-white/70 font-semibold text-sm uppercase tracking-wider">Thursday</p> <h2 class="text-3xl font-bold text-shadow mt-1">Blizzard</h2> </div> <!-- Visual: Snow --> <div class="absolute top-[25%] left-0 w-full h-48 z-10 pointer-events-none overflow-hidden" id="snow-container"> <!-- Snow flakes injected by JS --> </div> <!-- Snow Cloud --> <div class="absolute top-[22%] left-1/2 transform -translate-x-1/2 w-32 h-16 bg-white/20 rounded-full blur-xl z-0"></div> <svg class="absolute top-[20%] left-1/2 transform -translate-x-1/2 w-28 h-16 text-white/60 z-0" fill="currentColor" viewBox="0 0 24 24"><path d="M18.5 12A5.5 5.5 0 0 0 13 6.5c-.26 0-.51.02-.76.06A4.5 4.5 0 0 0 4 10.5 4.5 4.5 0 0 0 8.5 15h10a3.5 3.5 0 0 0 0-7z"/></svg> <!-- Bottom Info --> <div class="z-20 mt-auto"> <div class="flex items-end gap-2"> <span class="text-6xl font-light tracking-tighter">-4°</span> </div> <div class="mt-4 space-y-2"> <div class="flex justify-between text-sm text-white/80 border-b border-white/10 pb-1"> <span>Visibility</span> <span class="font-semibold">0.5 km</span> </div> <div class="flex justify-between text-sm text-white/80 border-b border-white/10 pb-1"> <span>Wind Chill</span> <span class="font-semibold">-12°</span> </div> </div> </div> </article> </div> </div> </main> <script> document.addEventListener('DOMContentLoaded', () => { // --- 1. Wind Animation Generator --- const windContainer = document.getElementById('wind-container'); const createWind = () => { const line = document.createElement('div'); line.classList.add('wind-line'); // Randomize properties const width = Math.random() * 60 + 40; // 40px to 100px const top = Math.random() * 100; const height = Math.random() * 2 + 1; const duration = Math.random() * 1 + 0.8; const delay = Math.random() * 2; line.style.width = `${width}px`; line.style.top = `${top}%`; line.style.height = `${height}px`; line.style.left = '-100px'; line.style.animation = `wind-flow ${duration}s linear ${delay}s infinite`; windContainer.appendChild(line); }; for(let i = 0; i < 15; i++) createWind(); // --- 2. Rain Animation Generator --- const rainContainer = document.getElementById('rain-container'); const createRain = () => { const drop = document.createElement('div'); drop.classList.add('rain-drop'); const left = Math.random() * 100; const height = Math.random() * 20 + 10; const duration = Math.random() * 0.5 + 0.4; const delay = Math.random() * 2; drop.style.left = `${left}%`; drop.style.height = `${height}px`; drop.style.animation = `rain-fall ${duration}s linear ${delay}s infinite`; rainContainer.appendChild(drop); }; for(let i = 0; i < 40; i++) createRain(); // --- 3. Snow Animation Generator --- const snowContainer = document.getElementById('snow-container'); const createSnow = () => { const flake = document.createElement('div'); flake.classList.add('snow-flake'); const left = Math.random() * 100; const size = Math.random() * 4 + 2; const duration = Math.random() * 2 + 1.5; const delay = Math.random() * 3; flake.style.left = `${left}%`; flake.style.width = `${size}px`; flake.style.height = `${size}px`; flake.style.animation = `snow-fall ${duration}s linear ${delay}s infinite`; snowContainer.appendChild(flake); }; for(let i = 0; i < 30; i++) createSnow(); // --- 4. 3D Tilt Effect (Mouse Interaction) --- // Adds a subtle 3D tilt to cards when mouse moves over them const cards = document.querySelectorAll('.glass-card-interactive'); cards.forEach(card => { card.addEventListener('mousemove', (e) => { const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2; const rotateX = ((y - centerY) / centerY) * -5; // Max 5deg rotation const rotateY = ((x - centerX) / centerX) * 5; card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.03)`; }); card.addEventListener('mouseleave', () => { card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale(1)'; }); }); }); </script> </body> </html> 拉煤问题 2 个帖子 - 2 位参与者 阅读完整话题