这个效果是没有任何设计图，也没有任何参照样版，藤藤从设计到效果一线完成。使用了CSS3的animation、transform、transition制作了一个动画导航效果，其中利用了Ligature Icon UI制作了导航中的ICON图标。当然还使用了CSS3的其他属性，比如说圆角属性制作了一个圆形，使用opacity控制菜单的动效果效果，最明显的效果是鼠标悬浮时会放大当前菜单项，怎么实现的，你知道？我想你知道的，要是不知道就继续往下看吧。

这个例子的效果其实很早就分享了，可能有很多同学不知道这个网址，当初是想做一个纯CSS3案例分享的网站，但由于时间和精力有限，最终胎死腹中，还好，在w3cplus主站上开了这样一个专栏，那些效果又可以面世了，今天开始抽空将把以前那些自认为还可以一看的demo效果移上来。今天转移过来的是第一个案例效果，共享按钮的提示效果，这个效果结构和样式都略有一定的难度，在学习这个属性之前最好先了解一下CSS3的animation,transform等属性的使用方法。感兴趣的继续往下吧。

CSS3控制图片全屏显示，或者说使用CSS3制作全屏背景不是一个很大的问题，前面也有做过一定的讨论，但使用CSS3制作一个全屏slider效果，我想对于一部分同学来说还是有一定的难度。不过话说回来，如果你掌握了CSS3的属性，比如说：CSS3的选择器、animation、transition等等，制作这样的一个效果就会轻松的很，不信你试试。

这个案例是一个登录后个人信息控制面板，包含了个人用户头像，整个信息面板以及一个退出按钮。其中最有特色的是信息面板的下拉菜单使用CSS3的animation、transform制作了一个动感十强的效果。

菜单效果在网上琳琅满目，w3cplus也制作了不少。今天根据Metrostyle的UI设计效果，配合CSS3的transform，aimation属性制作了一个下拉的动画导航效果。这个效果在webkit浏览器下得到较好的支持，在Firefox下有些卡。其中最关键的地方使用了两个额外标签控制翻转的前后效果，详细的制作过程看代码吧。

Breadcrumbs（面包屑），在网站上也是常见的一种UI效果，但这种效果大家看到的都是很普通普通的效果，使用CSS3制作的一些特殊效果，可能很少见吧。虽然早前在《CSS 制作Breadcrumbs》一文中搜集和制作了一些效果，但这些效果都没有运用动画效果。今天这个案例使用CSS3的几个属性制作了一个带有动画的Breadcrumbs效果，感兴趣的可以看看。

好像没有写CSS3方面的Demo效果了，今天在邮件中看到一个有关于CSS3写的文字发光和动画的案例，觉得很有意思，也就动手一试了，真心的爽。这个效果中最关键的是使用了十个相同的标签，来模仿了一个3D立体的效果，同时设置一个抖动的效果，这个效果主要由transform的rotate3d来制作，在不同的时间段设置不同的效果，另外通过text-shadow制作了阴影颜色变化的效果。详细的看代码吧。

这个效果我一拿到效果，让我惊叹了一翻，使用纯CSS3代码制作了一个莲花开放的效果，藤藤利用自己所掌握的CSS3知识将Niels Doorn使用js和CSS3制作的莲花开放的案例修改成了纯CSS3的案例。在这个案例中，最关键之处是莲花开放的八个花瓣开放时的时间配合与旋转角度的配合。藤藤为了调整这个时间，花费了不少精力。你看到这个DEMO也会像我一样惊叹。

今天将介绍遮罩属性 —— mask 的简单 demo。 mask 属性暂时只有 webkit 浏览器支持，使用需要加标识符。案例中用到的缩写均可展开，特别需要强调的是 mask-origin 这个属性，指定了遮罩的初始位置。默认是 padding，本例中设置为 content。

今天 993 为大家带来 mask  的新 demo，打造过程比前作复杂一些，本作代号是：Think different，希望大家能喜欢小弟做的 demo，多提建议帮助我改进。（请在 Chrome 下浏览）