css3实现百度兴趣图谱特效

作者:林炜贤来源:www.163css.com发表时间:(2013-05-04)

有兴趣的朋友打开这个网址看看:http://top.baidu.com/detail?b=258&w;=%B5%CB%D7%BF%E9%A6

对于这个图,你会不会想到flash,但它是用js做的,而且这种创意也是相当不错的,好想法。

我们也来实现一下,我是基于css3来做的,因为这里得用到css3里的scale和rotate,但是我看百度的代码是不需要这些的:

我们可以看到这里有许多奇怪的代码标签,

在百度中得知,原来是一种画图的语言啊,只是在工作中用得少。。。

这是我们做出来的效果,最外层的DIV是relative的,那五个小圈是absolute的:

这是html结构,那个q是用来实现问号的,line是用做线的,但是需要做旋转处理。。。

在jquery里,我们采用了scale,duration,只不过,我单独写了webkit。。。

像我们今天做的例子,跟百度的svg做法比起来,效果差了许多,但百度的创间是非常值得我们学习的。。。

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.com/hihilinxuan/cssjs/2013/05/bdtp/index.html

下载地址:css3实现百度兴趣图谱特效.zip

 

 

返回作者主页:www.163css.com阅读 (5622)
更多 1