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

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

Pagination（分页导航）效果，可以说每个网站都会有的效果，制作原理简单，今天我们也用css3制作了一个分页导航的效果，整个效果使用的CSS3属性很少，主要使用gradient来制作了渐变图片，使用border-radius来制作了圆角，不过藤藤在这个案例中为了模仿“active”效果，使用了“:target”属性来做的，实际生产中建议这么使用，因为active可以通过程序来控制，不是我们CSS的菜。详细的看代码吧，希望大家喜欢。

这是一个很简单的按钮效果，其来源于鬼哥的鬼群，看到鬼大问这样的按钮怎么制作，默认效果就不说了，说一下点击时的效果吧。当你点击按钮时，中间会有发光，并向外扩散的淡光效果。看到效果大家在考虑是否使用text-shadow制作，或者说使用box-shadow效果制作。但思量过来，直接在button上使用这两个属性都无法实现，最后决定使用“:after”来制作发光的效果。经过尝试，效果还是制作出来了，只不过没有设计师的那么完美。希望大家能从中找到一点思路。

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

Lavalamp Menu是一种很好的效果，早期在国外的博客中看到过这种效果，是通过jquery插件制作的，一开始还不知道这种效果就叫Lavalamp呢？后来为之告诉我的，今天使用CSS3写了一个垂直的Lavalamp的导航效果，这个效果其实很简单，主要是ribbons的制作要点功夫，然手就是选择器的使用，如果你掌握了这两个部分的知识，那么制作这个效果只是一个思路问题，看看代码你就知道了。

Accordion Slider 以前都是使用jQury或别的js脚本来制作，今天我们给大家展示一个纯CSS3实现的水平手风琴幻灯片播放的效果。这个效果有两个关键之处，第一是HTML结构中的input[type="radio"]是必备的，第二是样式通过radio的选中与未选中来控制对应的img显示和隐藏。这里采用的是css的兄弟元素选择器（~），这个是一个很好的应用。当然实现这种效果还可以通过“target”来实现，不过这种方法实现要借助js来显示默认的第一张图片，有兴趣的可以将这个案例改装一下。

早期制作手风琴菜单都需要依赖于js的脚本来实现，自从CSS3出现后，制作这种效果不在需要依赖于任何脚本。另外实现手风琴效果的制作方法有很多种，但较为常见的是使用css3的“:target”选择器来实现。在本例中也是一样的，通过“:target”选择器来控制下接菜单的“max-height”，原理简单，方法也简单，只是细节处理稍加注意。

这是一个使用CSS3中的transition和transform两个属性制作的一个动画下拉菜单效果，整个效果未采用任何js脚本代码，其中下接的折叠效果是通过transform的rotate来实现的，而transition是用来控制动画更具线性，当然这个效果也用到了transform的3d旋转属性，感兴趣的可以围观一下。扩大你自己的视野。

3D的文字特效都是通过text-shadow属性来制作的，其原理很简单，就是多个text-shadow的属性值叠加，模拟出3D的效果。其中主要一点就是掌握角度值，也就是X轴和Y轴的位置。今天我通过3D css Text Generator在线工具，生成了0、45、90、135、180、224、270、315和360九个不同角度的3D文字效果，将其代码放上来给大家参考。当然大家还可以通过这个在线工具，设计相关的参数。工具使用方法很简单，我就不细说了。