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

科技回声

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

GitHubTwitter

首页

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

资源链接

HackerNews API原版 HackerNewsNext.js

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

CSS3 Traveling Through Space

95 点作者 zhs大约 12 年前

14 条评论

kohsuke大约 12 年前
This demo is great, so I hate to be a party pooper, but this is not how it'll look if you are actually travelling near the speed of light at all!<p>For example, you'd see stars concentrate more near the direction you are heading with substantial blue shift, and not a whole lot on your side.<p>At the subjective speed in this demo, the blue shift would be so much and the light cone so narrow that you'll probably just see one dot in the center and pitch black everything else.<p>I think a physically accurate depiction of how it'll actually look if you are traveling near the speed of light would be very cool.
评论 #5623613 未加载
paulirish大约 12 年前
Source image that's used: <a href="http://s.cdpn.io/18515/PIA09959-1280x800.jpg" rel="nofollow">http://s.cdpn.io/18515/PIA09959-1280x800.jpg</a> It covers four rectangular walls and just shifts the Z closer and closer to you. And meanwhile does an opacity swap to a second set so it can do it infinitely.<p>Full unminified CSS: <a href="http://codepen.io/noahblon/pen/GKflw" rel="nofollow">http://codepen.io/noahblon/pen/GKflw</a><p>Pretty simple.
评论 #5624583 未加载
评论 #5625391 未加载
seszett大约 12 年前
It took me a while to understand, it only works in Chromium, Firefox shows a few images, maybe just a part of the animation at less than 1 fps.
评论 #5622569 未加载
baby大约 12 年前
Doesn't work on Firefox.
评论 #5623029 未加载
_chrismccreadie大约 12 年前
Outstanding.I felt as if I was warping through space in Eve Online! In all seriousness, amazing demo. Well done.<p>Off-topic but interested: It doesn't display correctly in Firefox (only renders a small segment of the space warp). Why is this?
评论 #5623084 未加载
sideproject大约 12 年前
There is an optical illusion happening as a by product of this demo! the "div" that separates the demo pane with the CSS, JS and HTML code pane looks slightly bent!
chriscoyier大约 12 年前
Same kinda concept to create a shelf 3D effect : <a href="http://codepen.io/chriscoyier/pen/gGiAE" rel="nofollow">http://codepen.io/chriscoyier/pen/gGiAE</a>
faramarz大约 12 年前
You're essentially enlarging a background image while moving it at the same time right? very cool!
simpsond大约 12 年前
Try zooming in and out. It feels like it changes the FOV.
gregorkas大约 12 年前
Probably the bes CSS3 demo I've ever seen. Good job.
habosa大约 12 年前
Wow that's impressive. How was this done?
评论 #5622765 未加载
Aeiper大约 12 年前
Can you put up the link to the code?
bharathwaaj大约 12 年前
Very good work! :)
illicium大约 12 年前
WebKit only.