CSS3制作秒表效果，以前想都不敢想，但thecodeplayer.com却完美的使用了CSS3中的animation属性制作了一个纯CSS3的秒表计时器的效果，让我们想都不敢想象，曾经需要javaScript的效果，如今使用CSS3的几个属性就完成了。在这个效果中主要是控制时间数字的显示，本例中每个数定的宽度和高度都定死了，其动画实现主要逻辑是通过对数字进行绝对定位，依靠改变数字的“top”属性值来实现时间数字的变更，当关还需要大家计算好他们之间转换的速率。所以说这个例子绝对是一个练习CSS3的animation属性的好例子，你要是掌握了这个例子，我想你对animation会有一个质的认识，希望大家喜欢（^_^）。

Codrops CSS3 Lightbox总供有三个效果，今天把第二个效果放上来与大家分享，这是一个完美的Lightbox效果，是有Codrops的Mary Lou制作的，真的很完美，不得不让人折服。能把CSS3运用到如此完美。这个案例与第一个区别其实很小，只是在对图片缩放做了一下不同效果处理。在这个效果中把CSS3常用的属性几乎都用上了，比如说：@font-face制作特殊字体效果；border-radius制作圆角效果；box-shadow实出盒子阴影效果；text-shadow实现文字阴影效果；opacity制作透明效果；gradient制作的渐变背景图片；transition实现过渡的动画效果；animation制作的动画效果等等。而且最为精彩的部分，图片能随浏览器大小进对缩放。要是你对这个感兴趣，不仿看看。

Codrops CSS3 Lightbox总供有三个效果，今天把第一个效果放上来与大家分享，这是一个完美的Lightbox效果，是有Codrops的Mary Lou制作的，真的很完美，不得不让人折服。能把CSS3运用到如此完美。在这个效果中把CSS3常用的属性几乎都用上了，比如说：@font-face制作特殊字体效果；border-radius制作圆角效果；box-shadow实出盒子阴影效果；text-shadow实现文字阴影效果；opacity制作透明效果；gradient制作的渐变背景图片；transition实现过渡的动画效果；animation制作的动画效果等等。而且最为精彩的部分，图片能随浏览器大小进对绽放，要是你对这个感兴趣，不仿看看。

Full CSS3 Lightbox从标题上就知道是一个CSS3制作的一个全屏显示的Lightbox效果。这个效果是在前一个效果的基础做了一定的改良，修改的最显示的地方就是添加了一个假的关闭按钮，其实给Lightbox的全屏图片显示时添加了一个动画效果，有０.９放大到１，而图片居中效果依然使用的是table和table-cell属性。详细的请参考下面展示的案例代码。

这个Lightbox效果也是一个纯CSS3写的效果，这个效果的制作方法也不算复杂，相对来说比较简单。主要使用了CSS3的“:target”属性来控制对应大图的显示与隐藏，而且配用了transition属性来制作了动画效果，而且还有意思的是使用了table和table-cell来实现图片的居中效果。具体效果请看看详细代码。

这个Lightbox效果实现原理很简单，就是点击图片或者使用tab键，当图片得到焦点（:focus）时，图片会在当前位置被放大，同时移动Y轴的距离。整个制作过程中使用了HTML5的新标签figure和figcaption，包含图片以及图片标题，同时在figure相邻位置设置一个span标签，通过选择器来控制span标签制作一个overlayout的朦板效果。这个效果中仅用到CSS3属性也非常的简单，利用border-radius制作了图片边框的圆角效果，使用box-shadow制作了图片的阴影效果，最主要的是使用CSS3的选择器配合transition和transform属性制作了一个类似于Lightbox的效果。