TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

CSS3 Spotlight effect

23 点作者 mauricesvay大约 15 年前

7 条评论

bd大约 15 年前
Here is my quick attempt to reproduce the effect just with CSS2 and transparent PNGs:<p><a href="http://alteredqualia.com/visualization/css2-spotlight.html" rel="nofollow">http://alteredqualia.com/visualization/css2-spotlight.html</a><p>It's still a bit buggy around the edges, but it's much faster than CSS3 one.<p>Plus it works also in Opera (and probably could be forced to run in Explorer with a bit more care).<p>-----<p>Edit: fixed bugs around edges and made it work in Explorer 8 (which is surprisingly the fastest).<p>About performance: the biggest difference is in Firefox (standard release 3.6.3, no development HW accelerated builds).
评论 #1273519 未加载
评论 #1273565 未加载
necubi大约 15 年前
In case anybody's wondering, it works by moving a radial gradient with 0 alpha at the center using javascript. It's slow on Chrome, probably due to the effort required to redraw the gradient at every time step.<p>A better approach, at least for webkit browsers, would be to use the new mask property.
评论 #1273383 未加载
kellishaver大约 15 年前
For anyone wanting a cross-browser, javascript implementation, I wrote a (very tiny and simple) jQuery plug-in to do it a few months back: <a href="http://kellishaver.com/projects/flashlight/" rel="nofollow">http://kellishaver.com/projects/flashlight/</a>
cubtastic71大约 15 年前
CUTE- reminds me of the early Flash 3 stuff - A spotlight!!
ramkalari大约 15 年前
Looks awesome
telemachos大约 15 年前
It looks cool as hell, but I can see it quickly becoming this generation's blink.
jamesshamenski大约 15 年前
web screencasts FTW