css3提供了很多新特性,使我们可以利用css实现各种有意思的图形甚至是很复杂的动画人物,比如机器猫、小黄人等模型,我总结了网络上比较火的一些用css3实现的经典案例(灵感来自于重拾CSS乐趣这篇文章),希望这些案例能够让你重拾CSS的乐趣,同时重新认识css这门语言,css的博大精深之处在于:你以为你都懂,其实你都不懂!
为了有一个比较清晰的目录结构,我将每一个案例都单独用一个文件夹包裹,而将html和css分为两个文件,从而符合了『结构表现』分离的原则,同时也有助于大家对照着去看
目前本项目已经通过Github Pages搭建完毕,可以点击这里查看
这款机器猫是目前为止我看到过的实现的最好的,还原度很高,而且作者对于阴影的把控恰到好处,使机器猫变得生动立体,可以看出来,作者不仅仅是一名前端大牛,更是一个追求完美,注重细节的设计师。
这款机器猫虽然没有上一款那么精致,但是也已经充分彰显了CSS的无穷魅力,如果你觉得上一款机器猫对于你来说难度太大,不如先拿这款机器猫练手。
这款iphone是所有本项目中介绍的图形中最简单的一个,但是也用到了CSS的很多技巧,很适合作为入门教材。
这款iphone从图片上看不出它的博大精深之处,因为作者连锁屏的动画都实现了!是目前为止我见过的实现的最精致、最完美的iphone;然而只可远观不可亵玩,其代码量多的惊人,对于我这种CSS渣渣来说,只能欣赏了。
用CSS3实现的iwatch加载动画,阴影配色都很逼真!
这四个小黄人其实用的是一套样式,只不过作者利用的less的函数功能,给小黄人添加不同的类名就可以达到不同的效果,高低胖瘦都可以变化,但是长相实在不敢苟同。
这款小黄人虽然表面看上去比较怪异,但是最起码长相比上面四个强了不少,配色也比较和谐温和。
这款小黄人还原度低了些,但是作者利用CSS3的animation和transform让其动了起来,还是很活灵活现的,同时原文链接中作者对于实现的过程也作了详细的解释,可谓贴心。
这是我最喜欢的一个图形了,还原度非常高,同时作者对于细节的刻画也很到位,美中不足的是没有添加相应的动画进去,如果她能够动起来,那就完美了!
前端大神chokcoco的大作,单标签实现抖音logo!
其实CSS3能做的不仅仅只有上面这些,但由于篇幅关系,就选取了我认为最难实现的一些图形放在了这个项目中,下面是一些前端大牛用CSS3实现的图形,比如Opera logo、IE logo、HTML5 logo等等: