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

科技回声

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

GitHubTwitter

首页

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

资源链接

HackerNews API原版 HackerNewsNext.js

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

Show HN: CSS3 Animated Glowing Forms

182 点作者 kaylarose大约 14 年前
I remember seeing the Dragon Labs Dragonfish Glowing Form Demo[1] when it first came out, and it always stuck in my head. They implement the effect by using a rather large background image and a mask image and move the background image around via Javascript. I was inspired and wanted to see how close I could get with CSS3.<p>I recommend using a Webkit browser [and you can see an alternate version of the animation on Firefox 4].<p>[1] http://labs.dragoninteractive.com/panel/demo/

14 条评论

kaylarose大约 14 年前
I remember being impressed by Dragon Lab's Dragonfish Login Form Demo[1] when it first came out. They implement the effect by using a rather large background image and a mask image and move the background image around via Javascript.<p>I wanted to see how close I could get using CSS3 without any images.<p>I recommend using a Webkit browser [you can also see an alternate implementation using Firefox 4]<p>[1]<a href="http://labs.dragoninteractive.com/panel/demo/" rel="nofollow">http://labs.dragoninteractive.com/panel/demo/</a>
评论 #2402029 未加载
bmelton大约 14 年前
I usually consider these exercises as fun, but pointless. This certainly meets that criteria, but I could actually see using this in a project.<p>It is very hot.<p>Are you also creating the 'Log in' button with CSS3? It's a little off on my screen. Browser is Chrome 9 on Windows 7: <a href="http://imgur.com/E9tif" rel="nofollow">http://imgur.com/E9tif</a>
评论 #2400085 未加载
评论 #2400078 未加载
jarin大约 14 年前
Okay, that is just sexy looking. I feel like I need to make a gaming site now or something.
Xurinos大约 14 年前
Usability problem: the animation attracts attention, distracts the eye. The moving glow, mixed with the small lettering, makes it hard to read quickly. When the animation finally stopped on my system, I was suddenly able to read the lettering easier.<p>This is cool-looking, for sure.
评论 #2400290 未加载
malnourish大约 14 年前
Firefox 4, animation does not restart after focusing a form field, clicking elsewhere, and then re-focusing on it.<p>I quite like the whole effect, though.
评论 #2400125 未加载
elii大约 14 年前
What's the point of having animated glowing forms if they swallow 50% of the machine's cpu?
评论 #2400272 未加载
melvinram大约 14 年前
Am I the only one that thought "hmm, this is &#60;blink&#62; 2011"?
评论 #2400437 未加载
评论 #2400731 未加载
rhizome大约 14 年前
Very nice. I recently tested out a few designs using large CSS3 shadows and it indeed slowed the browser <i>way</i> down when applied to a "FB Wall" number of page elements. Hopefully we don't have to wait for hardware to pick up the slack in implementation here.
评论 #2400486 未加载
AndyJPartridge大约 14 年前
I'm loving that glow!<p>Great work.<p>I'm outside on a laptop and can hardly read the grey text though.
评论 #2400223 未加载
kingsidharth大约 14 年前
Whatever happened to <i>usability</i>
评论 #2400977 未加载
评论 #2400743 未加载
retlehs大约 14 年前
Submit button is broken. Why is it outside of the &#60;form&#62;?<p>Cool use of animation.
评论 #2400188 未加载
zinssmeister大约 14 年前
super slick! I can see this work well on an iPhone webview. I want it like ice cream :)<p>Awesome job man.
评论 #2400148 未加载
NY_USA_Hacker大约 14 年前
Remember, about 25% of men are partially red-green color blind. So, a 'fire engine red' such as in the usual banner at HN such men can see, but lots of 'red' in mixtures of colors register as black. An emerald green can be seen, but in lots of mixtures the greens don't register. So, some light greens register as gray.<p>I'm such a man and mostly can't read that page.
评论 #2400498 未加载
评论 #2400506 未加载
评论 #2400493 未加载
评论 #2401497 未加载
mkilling大约 14 年前
Why does this have 160 upvotes on Hacker News? It's CSS, it doesn't work in all browser and it's not even remotely useful