一个简单的单车

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 4138 天前的主题，其中的信息可能已经有所发展或是发生改变。

周末，闲的蛋疼，天气依然热的跟狗一样。不想出门，又不知道干什么，想来想去还是coding吧，莫名其妙的想用CSS3把自己的单车画出来。好吧，干吧，反正闲着也是闲着。就这样。。。出“炉”了！

DEMO：http://www.xiaoqian.org/project/bike/

单车

闲着

Coding

13 条回复 • 1970-01-01 08:00:00 +08:00

powerfj

2013-07-21 19:36:57 +08:00

挺不错，不过那个路感觉有点不流畅，一顿一顿的，能做的更加流畅点不

liyandong

2013-07-21 20:20:53 +08:00

人呢？

mrsatangel

2013-07-21 20:38:40 +08:00

不错，就是有个明显的错误，车的前叉后叉居然被轮子挡住了

P233

2013-07-21 23:45:35 +08:00

@powerfj 用 transform: translateX() 会好一些，width, height, left, right 等这些属性在变化的时候浏览器会计算每一帧的属性值，而用 translate 只计算可看得到的变化

haichong520

2013-07-22 09:25:29 +08:00

@mrsatangel 嗯，我也觉得，不过空心三角是用内层遮挡的，层级提高的话会把轮子遮挡。比较蛋疼，so...

haichong520

2013-07-22 09:48:00 +08:00

@powerfj
@P233
哟西，有待加强。

password

2013-07-22 09:52:41 +08:00

从力学结构上讲，我感觉前叉似乎很容易散架。

manoon

2013-07-24 12:05:29 +08:00

耐斯。。学习！

rrfeng

2013-07-24 13:02:20 +08:00

@powerfj
这个动作算法的问题，你调整一下页面宽度就会发现流畅了……

momou

2013-07-24 14:35:21 +08:00

用chrome开发工具选中轮子会奇特效果。。。

mulog

2013-07-25 15:12:44 +08:00

@momou 果然很奇特。。

hit9

2013-07-25 17:52:49 +08:00

很棒

hewwcn

2013-07-25 19:57:11 +08:00

很有意思