找到『 23篇 』带有"transform"标签的文章列表.
CSS3 Hover Effects
这个案例效果很像lightbox的效果,鼠标悬浮在图片上时,会将图片放大,并且移至页面中心位置。这个效果的实现并没有使用太多的技术,最关键的就是使用了CSS3 transform中的scale和translate,其中使用scale()来放大图片,而translate()用来改变其位置,另外使用了CSS3选择器的:nth-type-of()分别对六张图片进行放大和定位。同时使用了transition属性,让整个图片放大效果看起来更圆润,详细的效果看代码吧,更有说服力。
CSS3 Tucked Corners
这个DEMO是来自于Red Team Design。这个站点是一个学习CSS3的好去处,简单明了,也是我常常去逛的一个网站。今天收到一个CSS3效果,就类似于一张图片四个角使用一个折角遮盖的效果。在整个效果制作中使用了两个标签配合“:after”和“:before”制作了四个折角,同时使用旋转transform以及定位到每个角落上,其中最难的一点就是,使用gradient制作了四个切角效果,这个效果在《CSS3+jQuery制作切角的Tabs》一文中有做过详细介绍。接下来将这个效果使用代码展现给大家。希望大家通过这个案例会有所收获。
23 Box-shadow Effects
Box-shadow效果是CSS3中很实用的属性之一,现在网站大量的阴影效果都是通过这个属性来制作,今天整理了23个盒子阴影效果以供大家参考。当然这个案例中的效果不单单是一些简单的box-shadow效果,在整个案例中,有些效果使用了CSS3的伪类选择器,以及CSS3的transform等属性,制作了一些特殊的box-shadow效果,感兴趣的往下吧。
CSS3 Share Tooltip
这个例子的效果其实很早就分享了,可能有很多同学不知道这个网址,当初是想做一个纯CSS3案例分享的网站,但由于时间和精力有限,最终胎死腹中,还好,在w3cplus主站上开了这样一个专栏,那些效果又可以面世了,今天开始抽空将把以前那些自认为还可以一看的demo效果移上来。今天转移过来的是第一个案例效果,共享按钮的提示效果,这个效果结构和样式都略有一定的难度,在学习这个属性之前最好先了解一下CSS3的animation,transform等属性的使用方法。感兴趣的继续往下吧。
藤藤每日一练——Pure CSS3 Dashboard
这个案例是一个登录后个人信息控制面板,包含了个人用户头像,整个信息面板以及一个退出按钮。其中最有特色的是信息面板的下拉菜单使用CSS3的animation、transform制作了一个动感十强的效果。
藤藤每日一练——CSS3 Animation Menu
这是一个使用CSS3中的transition和transform两个属性制作的一个动画下拉菜单效果,整个效果未采用任何js脚本代码,其中下接的折叠效果是通过transform的rotate来实现的,而transition是用来控制动画更具线性,当然这个效果也用到了transform的3d旋转属性,感兴趣的可以围观一下。扩大你自己的视野。
CSS3 Animation Dropdown Menu With Metrostyle Web UI
菜单效果在网上琳琅满目,w3cplus也制作了不少。今天根据Metrostyle的UI设计效果,配合CSS3的transform,aimation属性制作了一个下拉的动画导航效果。这个效果在webkit浏览器下得到较好的支持,在Firefox下有些卡。其中最关键的地方使用了两个额外标签控制翻转的前后效果,详细的制作过程看代码吧。
藤藤每日一练——CSS3 Animation Breadcrumbs
Breadcrumbs(面包屑),在网站上也是常见的一种UI效果,但这种效果大家看到的都是很普通普通的效果,使用CSS3制作的一些特殊效果,可能很少见吧。虽然早前在《CSS 制作Breadcrumbs》一文中搜集和制作了一些效果,但这些效果都没有运用动画效果。今天这个案例使用CSS3的几个属性制作了一个带有动画的Breadcrumbs效果,感兴趣的可以看看。
CSS3 Glowing Text Effect
好像没有写CSS3方面的Demo效果了,今天在邮件中看到一个有关于CSS3写的文字发光和动画的案例,觉得很有意思,也就动手一试了,真心的爽。这个效果中最关键的是使用了十个相同的标签,来模仿了一个3D立体的效果,同时设置一个抖动的效果,这个效果主要由transform的rotate3d来制作,在不同的时间段设置不同的效果,另外通过text-shadow制作了阴影颜色变化的效果。详细的看代码吧。