animation

CSS3制作秒表

CSS3制作秒表

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

Codrops CSS3 Lightbox 2

Codrops CSS3 Lightbox 2

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

Codrops CSS3 Lightbox

Codrops CSS3 Lightbox

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

Full CSS3 Lightbox

Full CSS3 Lightbox

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

Pure CSS3 Lightbox

Pure CSS3 Lightbox

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

Lightbox effect with Tabindex and CSS3

Lightbox effect with Tabindex and CSS3

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

CSS3制作卷角菜单

CSS3制作卷角菜单
这个案例是由@猫仔同学提供的。最大的亮点就是使用了CSS3制作了卷边效果,配上js的移动效果,真是与众不同。在这个demo中主要运用了border-radius制作卷边效果,使用gradient实现了导航的渐变效果,而且还使用了border绘制了向上的箭头,同时给箭头配上了一个css3的动画效果。真的不错哟。

css3圆环形旋转

css3圆环形旋转
本实例看起来有点像太极,其实更如一块环形的玉佩,设计比较好看。先设计一个圆形填充一个135deg的两个颜色的渐变,各位一半。然后设计三个子元素为上中下的小圆,一个为浅色的与渐变背景的浅色的一样,一个为黑色的充当中间的孔,一个为深色的与渐变背景的深色一样,为了表现更佳,给这三个小圆各自应用了box-shadow生成阴影。然后就是父元素的animate转动360deg。

css3时钟

css3 clock
本实例纯css3打造,因为没有获取当前时间,所以初始化时间为12点,打开即开始走动。圆盘使用border-radius做成,然后一个:before生成中间的圆点,一个:after生成倒影。至于三个指针就是关键了,其高度及宽度不等,绝对定位于中间的同一圆点,然后以这点为坐标旋转,旋转使用动画一样,只是旋转一周的持续时间不一样,秒针为60s,分针为3600s,时钟为84600s。

css3 3D旋转正方体

css3 3D旋转正方体
再来一个3D的案例,本实例自谷歌,技术自然不用说了,那是一级棒。个人能力有限,我就挑简单的分析下呵呵。说下这个正方体的实现吧,先设置父级元素的transform-style:preserve-3d,然后定义各个面的宽高及绝对定位并设置scale3D为1.2倍,最后就是把各个面分别运用rotateX,rotateY,再运用translateZ拉开距离。至于旋转的运动则是设置父元素的animation从0到360deg的旋转。既然是google的案例,那肯定不支持火狐啊,不过只要换个前缀火狐也不是问题吧。

页面

返回顶部