transform

CSS3 Glowing Text Effect

CSS3 Glowing Text Effect

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

藤藤每日一练——CSS3 Animation Breadcrumbs

藤藤每日一练——CSS3 Animation Breadcrumbs

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

CSS3 Animation Dropdown Menu With Metrostyle Web UI

CSS3 Animation Dropdown Menu With Metrostyle Web UI

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

藤藤每日一练——CSS3 Animation Menu

藤藤每日一练——CSS3 Animation Menu

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

藤藤每日一练——Pure CSS3 Dashboard

藤藤每日一练——Pure CSS3 Dashboard

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

CSS3 Share Tooltip

CSS3 Share Tooltip

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

23 Box-shadow Effects

23 Box-shadow Effects

Box-shadow效果是CSS3中很实用的属性之一,现在网站大量的阴影效果都是通过这个属性来制作,今天整理了23个盒子阴影效果以供大家参考。当然这个案例中的效果不单单是一些简单的box-shadow效果,在整个案例中,有些效果使用了CSS3的伪类选择器,以及CSS3的transform等属性,制作了一些特殊的box-shadow效果,感兴趣的往下吧。

CSS3 Tucked Corners

CSS3 Tucked Corners

这个DEMO是来自于Red Team Design。这个站点是一个学习CSS3的好去处,简单明了,也是我常常去逛的一个网站。今天收到一个CSS3效果,就类似于一张图片四个角使用一个折角遮盖的效果。在整个效果制作中使用了两个标签配合“:after”和“:before”制作了四个折角,同时使用旋转transform以及定位到每个角落上,其中最难的一点就是,使用gradient制作了四个切角效果,这个效果在《CSS3+jQuery制作切角的Tabs》一文中有做过详细介绍。接下来将这个效果使用代码展现给大家。希望大家通过这个案例会有所收获。

CSS3 Hover Effects

CSS3 Hover Effects

这个案例效果很像lightbox的效果,鼠标悬浮在图片上时,会将图片放大,并且移至页面中心位置。这个效果的实现并没有使用太多的技术,最关键的就是使用了CSS3 transform中的scale和translate,其中使用scale()来放大图片,而translate()用来改变其位置,另外使用了CSS3选择器的:nth-type-of()分别对六张图片进行放大和定位。同时使用了transition属性,让整个图片放大效果看起来更圆润,详细的效果看代码吧,更有说服力。

css3动画——垃圾桶

css3动画——垃圾桶
首先非常感谢丸子大师(http://i.wanz.im/)提供这个案例的DEMO源码。这是一个使用CSS3的transform和transition制作的一个动画效果,当鼠标处于悬停状态时,垃圾桶会打开,有一个小卡通被丢进垃圾桶。创意很有意思,实现很简单。如果丸子在花点时间将demo中的图片换成用css3写,就是一个纯CSS3的动画DEMO了,还有一个地方可以改变的,就是不用三个标签,使用CSS3的":before"和":after"来代替里面的子元素。这样就省去两个标签,有兴趣的同学可以尝试一下,在丸子的基础上进行修改,做成后,你会有一种成就感的。

页面

返回顶部