小白开发插件，在期间看文件的时候学到的一些东西，特地分享给大家： 博文链接： https://418122.xyz/posts/project/chrome-extension-basic-structure-beginners-guide 插件仓库链接： https://github.com/V-IOLE-T/tab-harbor GitHub 正在尝试上架 Chrome 插件商店 很多人第一次打开一个 Chrome 插件项目时，会看到一堆文件名，然后立刻陷入混乱。 index.html 、 style.css 、 manifest.json 、 background.js 、 content.js 、 app.js 看起来都像"代码文件"，可它们根本不在同一个层面上工作。想真正看懂插件，关键不是背文件名，而是理解这些文件分别处在什么位置，承担什么职责，以及它们如何配合浏览器、网页和用户界面一起运转。 这篇文章想做的事很直接，就是把这些文件背后的逻辑彻底串起来，让你在看到一个插件目录时，能迅速判断每个文件到底在做什么。 index.html 是插件界面的骨架 在 Chrome 插件里， index.html 通常用来描述某个页面的内容和结构。它决定页面上会出现什么元素，比如标题、按钮、输入框、文本区域，也负责把样式文件和脚本文件接进来。你可以把它理解为一个界面的骨架，因为页面里"有什么"这件事，主要就是由 HTML 决定的。 如果一个插件有弹窗界面，那么点击插件图标后看到的内容，通常来自某个 HTML 文件。有些项目把它命名为 popup.html ，有些项目也会叫 index.html 。名字并不重要，重要的是它是否被浏览器当成插件页面真正加载了。 下面这个例子足够说明它的角色： <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello Chrome Extension</h1> <button>点击我</button> </body> </html> 这段代码里，页面里有哪些内容，完全由 HTML 决定。它告诉浏览器，这个页面有一个标题，有一个按钮，同时还引入了样式文件。你在页面里看到的一切界面元素，本质上都从这里开始。 style.css 决定界面看起来是什么样 如果说 HTML 负责把页面元素摆出来，那么 style.css 负责让这些元素有可读性、有层次感，也更像一个真正能用的界面。字体大小、颜色、背景、边距、按钮的外观、元素之间的排列方式，这些都属于 CSS 的领域。 比如下面这段代码： body { width: 250px; font-family: Arial, sans-serif; padding: 10px; } h1 { color: blue; font-size: 18px; } button { background-color: green; color: white; } 这段样式并没有改变页面里"有什么"，但它显著改变了页面"长什么样"。这正是 CSS 的作用。很多初学者一开始会把 HTML 和 CSS 混着理解，实际上它们解决的是两个完全不同的问题。HTML 决定内容和结构，CSS 决定视觉和排版。 放到插件环境里也是一样。无论这个页面是弹窗页、选项页，还是插件扩展出来的其他界面，CSS 的职责都很稳定，就是把原本生硬的结构变成可以阅读、可以操作、也更符合界面习惯的样子。 在插件里，HTML、CSS、JavaScript 分别站在不同位置上 只看 HTML 和 CSS，还只是理解了插件界面的静态部分。一个真正可用的插件，还必须让界面"动起来"，这时候 JavaScript 才会加入进来。 HTML 负责搭出页面结构，CSS 负责赋予它视觉效果，JavaScript 负责让页面对用户的操作做出反应。比如用户点击按钮后获取信息，或者把某个结果显示到页面上，这些都属于 JavaScript 的工作。 下面这段代码很简单，但它能准确展示 JavaScript 的作用： document.getElementById("btn").addEventListener("click", () => { console.log("按钮被点击"); }); 这时候你就能看到三者之间的协作关系。HTML 放了一个按钮，CSS 把这个按钮变得更清晰、易用，JavaScript 让这个按钮具备"点击以后发生事情"的能力。它们共同组成了插件界面这一层的完整逻辑。 manifest.json 是插件的入口和规则中心 当你把眼光从界面移开，就会看到插件最核心的配置文件，也就是 manifest.json 。这个文件的重要性非常高，因为 Chrome 浏览器安装和加载插件时，最先读取的就是它。没有它，插件无法被识别。写错了它，插件也可能根本无法运行。 它承担的职责可以概括为一件事，就是告诉浏览器：这个插件是谁，它有哪些页面，有哪些脚本，想申请哪些权限，以及这些能力应该如何被组织起来。 最简单的内容通常长这样： { "name": "My Extension", "version": "1.0", "manifest_version": 3 } 这里记录了插件的基本身份信息。接着你还会看到它声明插件弹窗页面： { "action": { "default_popup": "popup.html" } } 浏览器读到这里，就知道用户点击插件图标时，应该打开 popup.html 。如果插件带后台脚本，还会出现类似配置： { "background": { "service_worker": "background.js" } } 如果插件需要把脚本注入网页，则可能是这样： { "content_scripts": [ { "matches": ["https://*/*"], "js": ["content.js"], "css": ["content.css"] } ] } 如果插件要访问某些浏览器能力，还得显式申请权限： { "permissions": ["storage", "tabs", "activeTab"] } 所以，从更本质的角度看， manifest.json 的作用，就是定义插件"能做什么、在哪里做、通过谁去做"。这也是为什么它像一个总开关。你后面看到的页面、脚本、权限，最终都要回到这里去确认。 background.js 像插件的后台调度中心 理解了 manifest.json 后，再去看 background.js 就容易多了。这个文件通常不负责展示界面，也不会直接嵌在某个网页里。它更像插件的后台控制层，负责监听浏览器事件、处理全局逻辑、协调不同模块之间的通信。 比如插件刚被安装时，它可以执行初始化逻辑： chrome.runtime.onInstalled.addListener(() => { console.log("插件已安装"); }); 它也可以监听某些全局事件，或者接收来自界面页和内容脚本的消息： chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { if (message.type === "getData") { sendResponse({ data: "这是后台返回的数据" }); } }); 为什么插件需要这样的文件？因为有些事情不适合写在界面脚本里，也不适合写在网页注入脚本里。比如统一管理状态、协调多个标签页、处理浏览器级别的事件、访问某些只允许后台使用的 API，这些任务都更适合放在后台脚本中。 如果你使用的是 Manifest V3，那么这里还有一个重要变化。 background.js 在很多情况下是以 service_worker 的方式运行的。它不会一直常驻，而是事件来了就唤醒，执行完任务后可能进入休眠。这背后体现的是 Chrome 的设计取向，它希望插件更节省资源，也更容易控制风险。 content.js 是插件进入网页内部后的执行者 如果说后台脚本站在浏览器层面处理逻辑，那么 content.js 站在网页现场工作。它会被注入某个网页中，因此可以直接访问这个网页的 DOM，也就是页面上的标题、按钮、正文、输入框这些真实存在的元素结构。 举个最简单的例子： const title = document.querySelector("h1"); console.log(title.innerText); 这段代码能直接读取网页上的标题内容。它也可以修改页面： document.body.style.backgroundColor = "lightyellow"; 甚至还能监听页面中的某些操作。也就是说， content.js 的核心价值，在于让插件真正进入网页环境，看到页面内容，并对页面进行读取或修改。 不过这里有一个非常容易被忽略的边界。 content.js 虽然运行在网页里，但它依然属于插件。它拥有插件赋予的能力，也受到插件环境的限制。它和页面原生脚本之间并不是完全共享一切的关系，因为浏览器会通过隔离机制防止它们互相污染。这个细节很关键，因为很多初学者会误以为内容脚本和网页自身的 JavaScript 完全是一回事，实际情况并没有这么简单。 插件的核心难点，在于多个运行环境同时存在 当你把 popup.js 、 background.js 、 content.js 放在一起看时，很容易觉得它们全都是 JavaScript，所以好像只是写法不同。真正的区别并不在语法，而在运行环境。 界面脚本运行在插件自己的页面里，只有当这个页面被打开时它才活跃。后台脚本运行在插件后台，专门处理全局事件和中转逻辑。内容脚本运行在目标网页中，负责接触页面本身。这三种脚本虽然都写成 .js 文件，但它们能访问的对象、拥有的权限、存在的生命周期都不一样。 这正是 Chrome 插件学习曲线真正陡峭的地方。你卡住的往往不是 API，而是脑中没有建立"多环境协作"的图景。一旦建立起这个图景，再看文件结构就会清晰很多。 一个最常见的协作流程，到底是怎样跑起来的 假设我们做一个非常简单的插件。用户点击插件图标，弹出一个小窗口，窗口里有一个按钮，点击按钮后读取当前网页标题并显示出来。这个功能很小，但它足以把前面提到的所有角色串到一起。 首先浏览器会读取 manifest.json ： { "manifest_version": 3, "name": "Title Reader", "version": "1.0", "action": { "default_popup": "popup.html" }, "permissions": ["activeTab"], "background": { "service_worker": "background.js" } } 这一步完成后，浏览器已经知道这个插件长什么样，有什么弹窗页面，有什么后台脚本，以及它申请了当前标签页权限。 当用户点击插件图标时，浏览器会根据 default_popup 打开 popup.html 。页面一打开，HTML 会把结构渲染出来，CSS 负责样式，页面脚本负责交互逻辑。如果 popup.html 里有一个按钮和一个显示结果的区域，那么脚本就可以写成这样： document.getElementById("btn").addEventListener("click", async () => { const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); document.getElementById("result").textContent = tab.title; }); 如果需求只是读取当前标签页的标题，这样就够了。但如果你想读取网页内部更细的内容，比如某段正文、某个按钮文本、某个元素属性，那仅靠弹窗脚本通常不够，你就得让 content.js 进入网页现场去执行。 它可以先读取网页内容，然后把结果通过消息机制发回插件系统： const pageTitle = document.title; chrome.runtime.sendMessage({ type: "pageTitle", data: pageTitle }); 这时候如果流程稍微复杂一些，后台脚本就会出场，承担协调者角色。比如弹窗先给后台发消息，后台再联系当前标签页里的内容脚本，内容脚本拿到网页数据后返回给后台，后台再把结果转给弹窗。这个链路看起来绕了一层，但你会发现它的分工很清晰。界面只处理用户交互，后台处理协调和调度，内容脚本只关注网页现场。 示例代码大致可以写成这样。 popup.js ： chrome.runtime.sendMessage({ type: "getPageInfo" }, (response) => { document.getElementById("result").textContent = response.data; }); background.js ： chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { if (message.type === "getPageInfo") { chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { chrome.tabs.sendMessage(tabs[0].id, { type: "readTitle" }, (response) => { sendResponse({ data: response.title }); }); }); return true; } }); content.js ： chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { if (message.type === "readTitle") { sendResponse({ title: document.title }); } }); 把这段流程真正看懂后，你对插件的整体架构就已经入门了。因为你会意识到，插件开发的本质不是单纯地写一个页面，而是把浏览器环境、插件界面和网页环境连接成一个系统。 app.js 到底是什么，它为什么总让人困惑 很多人学到这里，又会看到一个新的文件名，叫 app.js ，然后开始怀疑自己是不是漏学了某种"官方角色"。其实这里最需要澄清的一点是， app.js 并不是 Chrome 插件规范里规定必须存在的文件。它通常只是开发者自己起的名字。 这意味着，当你在一个插件项目里看到 app.js 时，不能直接根据名字判断它一定负责什么。判断它职责的关键，始终只有两件事，就是它在哪里被加载，以及它运行在什么环境中。 如果 popup.html 里有这样的代码： <script src="app.js"></script> 那这个 app.js 很可能就是弹窗页面的主逻辑脚本。它可能负责监听按钮点击、获取输入框内容、调用浏览器 API、更新页面文本等交互行为。比如： document.getElementById("btn").addEventListener("click", async () => { const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); document.getElementById("result").textContent = tab.title; }); 如果它被 options.html 引入，它就可能是设置页脚本。如果它出现在 manifest.json 的后台配置中： { "background": { "service_worker": "app.js" } } 那它虽然名字叫 app.js ，实际承担的就是后台脚本的职责。如果它被声明在 content_scripts 中： { "content_scripts": [ { "matches": ["<all_urls>"], "js": ["app.js"] } ] } 那它本质上就是内容脚本。 所以，理解 app.js 最重要的一句话是， 文件名本身不决定身份，加载位置和运行环境才决定身份 。很多初学者容易被文件名带偏，以为名字像什么就是什么。实际开发里， main.js 、 index.js 、 app.js 这类名字都很常见，它们更多反映的是工程命名习惯，而不是浏览器规范。 判断一个脚本作用时，最可靠的方法是什么 如果你以后再打开一个陌生的插件项目，最稳妥的阅读方式就是先看 manifest.json ，再看 HTML 文件，最后才去看具体脚本内容。 manifest.json 会告诉你有哪些页面、有哪些后台脚本、有哪些内容脚本、申请了哪些权限。HTML 文件会告诉你哪些 JavaScript 是页面脚本，因为它们会被 <script src="..."> 直接引入。脚本内容本身才会进一步告诉你，这个文件内部具体写了什么业务逻辑。 这个阅读顺序很重要，因为它会强迫你从"运行上下文"去理解代码，而不是从"文件名猜测"去理解代码。你一旦形成这种习惯，不光看 Chrome 插件会快很多，将来学 Vue、React，甚至看更复杂的前端工程，也会有更强的拆解能力。 学插件时，最推荐的理解路径 对于初学者来说，最容易迷失的地方，是一上来就想把所有文件和 API 全部记住。这样做通常效果很差，因为你的脑海里没有一张系统图，记忆就没有挂钩点。 更好的路径，是先看清谁负责界面，也就是 HTML、CSS 和页面脚本。然后理解谁负责进入网页读取和修改内容，也就是 content.js 。最后再理解谁负责监听全局事件、连接各个模块、处理中间调度，也就是 background.js 。当这条主线建立起来以后，消息传递、权限管理、脚本注入这些内容都会顺势变得可理解。 如果你一定要用一句话概括整个插件结构，那么这句话可以写成这样： manifest.json 先注册角色并声明权限，HTML 和 CSS 负责界面呈现，JavaScript 负责交互逻辑， background.js 负责后台调度， content.js 负责进入网页执行具体动作，而 app.js 是否重要，取决于它究竟被谁加载、运行在哪个环境里。 结尾：真正该建立的，是"环境意识" 学 Chrome 插件，表面上像是在学很多零散文件。更深一层看，你其实是在学习多个受控运行环境如何协作。浏览器层、插件界面层、网页内容层，这三层有各自的边界，也通过消息和配置互相连接。你一旦抓住这个系统视角，就不会再被文件名和目录结构轻易迷惑。 所以当你下次看到一个插件项目时，先别急着问"这个文件名是什么意思"。更值得问的是，这个文件由谁加载，它运行在哪里，它能访问什么，它和谁通信。只要这四个问题想清楚，整个项目的骨架就会慢慢显形。 【拓展思考】 Chrome 插件很像一个小型多进程系统。弹窗脚本、后台脚本、内容脚本分别处在不同上下文中，消息传递像协议，权限声明像访问控制，页面注入像受限部署。你如果从系统设计的视角理解插件，后面学浏览器扩展、Electron、前端工程化，很多概念都会互相打通。 1 个帖子 - 1 位参与者 阅读完整话题
Article URL: https://github.com/raullenchai/Rapid-MLX Comments URL: https://news.ycombinator.com/item?id=47816238 Points: 1 # Comments: 0
Email Signature Builder that is completely free, supports placeholders, and with WYSIWYG / HTML Editor you're completely free to build it your way. Comments URL: https://news.ycombinator.com/item?id=47815858 Points: 1 # Comments: 0
IT之家 4 月 18 日消息，科技媒体 Linuxiac 昨日（4 月 17 日）发布博文，报道称开源兼容层 Wine 11.7 版本更新发布，在 Linux 与 macOS 平台上，持续优化运行 Windows 应用的兼容能力。 底层方面，本次更新最核心变动， 不再依赖 libxml2 库重构 MSXML ，从而提升底层处理 XML 的自主性与稳定性。 在脚本支持方面，新版显著增强 VBScript 功能，开发团队针对解析、控制流、常量、字典处理及行继续符等多个模块修复了大量错误。 多媒体功能层面，IT之家援引博文介绍，D3DX 新增支持 SRGB 滤镜，DirectSound 则引入了 7.1 扬声器配置。 修复方面，新版共计修复 35 个 BUG。应用层面修复了 ABBYY FineReader 12 Professional、VOCALOID6、Fade In Pro 及 Kakaowork 等软件的兼容性问题；游戏方面解决了 MapleStory World、Act of War Direct Action 等运行故障。 参考 Wine 11.7
Article URL: https://agents.ml Comments URL: https://news.ycombinator.com/item?id=47810052 Points: 2 # Comments: 1
Hey HN, Sjoerd de Vries here. I have worked on Seamless for nearly 10 years now. It has been used in my lab, but I was always around for troubleshooting. This is the first time that I think it's ready to stand on its own. I would love to hear your thoughts about it. It started as a hobby project, I had an itch about programming not being at-your-fingertips enough. Then I applied it to my work as a bioinformatics research engineer. The early versions focused on interactive workflows. After a year or two I realized that to make interactivity work properly, you need really good DAG tracking, so checksums were added everywhere. My lab built a collaborative web server with it that we published. More recently I've rebuilt it around the command line, persistent caching, and remote deployment. It's still in alpha, but the core is usable. Core idea: same code + same inputs = same result, identified by checksum. If you've already computed it, you don't compute it again. Two entry points: Python: from seamless.transformer import direct @direct def add(a, b): import time time.sleep(5) return a + b add(2, 3) # runs, caches result add(2, 3) # cache hit — instant Bash: seamless-run 'seq 1 10 | tac && sleep 5' # runs, caches result seamless-run 'seq 1 10 | tac && sleep 5' # cache hit — instant With persistent caching enabled, results are stored as checksum-to-checksum mappings in a small SQLite database that can be shared with collaborators, so that they get cache hits too. Execution scales by changing config, not code: in-process, spawned workers, or a Dask-backed HPC cluster. Remote execution also doubles as a reproducibility test. If your code produces the same result on a clean worker, it's reproducible. If not, Seamless helped you find the problem, whether it's a missing dependency, an undeclared input, or a platform sensitivity. Built for scientific computing and data pipelines, but works for anything pipeline-shaped. Comments URL: https://news.ycombinator.com/item?id=47809537 Points: 1 # Comments: 0
有大佬用过office-cli这个skill吗？我今天晚上电脑不知道咋了，用着用着给我弹出来一个html文件 我看了一下这个文件前缀叫officecli 我怀疑是这个skill干的，但是我电脑啥也没干呀，也没开什么agent干活。不能是电脑被黑了吧 1 个帖子 - 1 位参与者 阅读完整话题
https://cdn.wkacc.vip/u/XMleszh 订阅15分钟内有效，无效就不补了 1 个帖子 - 1 位参与者 阅读完整话题
Article URL: https://tiago.sh/blog/a-memory-that-follows-me.html Comments URL: https://news.ycombinator.com/item?id=47806498 Points: 2 # Comments: 2
Article URL: https://rufilla.com/the-mlforge-proof-of-concept/ Comments URL: https://news.ycombinator.com/item?id=47805834 Points: 1 # Comments: 0
glm coding plan的网页从9点30就开始网站访问不进去。 然后10点一到完全挤不进去了，而且他的html元素如果不修改的话必须要10点后进网页才能抢… 我就光做了10分钟验证码，看着系统繁忙提示和无能的丈夫一样。 好不容易创建一个订单还是0元无法付款的(因为已经被抢完了) 其他家怎么都不上glm5.1 急急急急急 6 个帖子 - 6 位参与者 阅读完整话题
clash: https://us1.zhuk.dpdns.org/YouTube/daWE17/c.yaml v2ray: https://us1.zhuk.dpdns.org/YouTube/daWE17/v.txt 2 个帖子 - 2 位参与者 阅读完整话题
如题，有大佬可以帮忙下载原创力文档的文章吗？ https://max.book118.com/html/2019/0324/7006021031002015.shtm 1 个帖子 - 1 位参与者 阅读完整话题
Bonsai 1.7B 可以直接在浏览器里通过WebGPU直接运行 Bonsai 1-bit WebGPU - a Hugging Face Space by webml-community 4 个帖子 - 3 位参与者 阅读完整话题
Article URL: https://twitter.com/PrismML/status/2044833023682896134 Comments URL: https://news.ycombinator.com/item?id=47799849 Points: 3 # Comments: 0
I am making a programming language called Kedr. The code in Kedr is displayed as plain text on Codeberg, so I have made my compiler emit html files that provide navigation, syntax highlighting and tooltips with the type information. https://codeberg.org/denismarkelov/kedr Comments URL: https://news.ycombinator.com/item?id=47797721 Points: 1 # Comments: 0
Article URL: https://github.com/heygen-com/hyperframes Comments URL: https://news.ycombinator.com/item?id=47797513 Points: 6 # Comments: 0
提示词: 写一个html 的 俄罗斯方块游戏 使用模型: Qwen3.6-35B-A3B-Q4_K_M-GGUF 平时都拿俄罗斯方块测试模型表现,一次就完成了, 今天这个确实惊到我了 https://jsfiddle.net/moonheart/yrdxLueh/ 5 个帖子 - 4 位参与者 阅读完整话题
需求版本 Tuwunel 1.6.0 打开你的 /etc/tuwunel/tuwunel.toml 在最后一行添加 [global.storage_provider.b4.S3] url = "s3://${桶名称}" bucket = "${桶身份证}" region = "us-west-004" key = "${keyID}" secret = "${secret}" endpoint = "https://${Endpoint}" b4可以替换为任何名称(作为提供商名称) url,bucket,region,endpoint 在 https://secure.backblaze.com/b2_buckets.htm 获取 key，secret 在 https://secure.backblaze.com/app_keys.htm 生成并填入 随后，找到 media_storage_providers = ["media"] 这一行 修改为 media_storage_providers = ["media", "b4"] 其中 b4 替换为你上面选择的提供商 名称 [1] 如果你从老版本升上来 可能会看不到已有 media_storage_providers 键值，则可以直接挂靠到 [global] 下新建 这里的 media 表示本地存储 ↩︎ 1 个帖子 - 1 位参与者 阅读完整话题
第一反应：快，好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 位参与者 阅读完整话题