你所选择的标签为: transform

杂志翻页效果(基于jQuery CSS3)

14

May

2013

由于自己的工作主要是做移动终端的产品(某阅读App),所以翻页啊什么更是一直接触。本人属于看到新鲜的、好玩的东西就手痒,所以诱使我写了今天的这个例子。

操作:键盘中“←左”“右→”方向键来实现翻页。

为了能带给您最佳的呈现效果,请使用基于webkit内核的浏览器:Chrome、Safari;不支持IE! [ 查看全文... ]

CSS3 3D图书展示 (3D Book Showcase)

31

January

2013

今天的例子,主要实现了:图书的360°翻转和图书打开的过渡效果。

这个效果,是我从一个国外网站上所看到的,由于效果逼真便又开始手痒了起来,自己制作了一个。有时候,光看代码觉得还好,但当自己从0开始制作的时候,顿时变的道路坎坷。期间遇到了很多小BUG和细节上的我问题,不过本人高要求搞标准,看到问题一定要修复的洁癖,这几天一直在不断的修改修改再修改,好在终于制作完成了(T_T)...

虽然花了大把的时间,不过总算有所收获,对CSS 3D Transforms有了一个更为详细的了解过程。平时觉得CSS 3D Transforms并没有那么复杂,想不到实际运用的时候还是会有很多未知的问题在等着你。其中,有个让我非常胸闷的问题。那就是为了偷懒,使用了prefixfree.min.js,导致页面每次加载的时候,都会触发transition-duration,导致有些效果在刷新的时候就执行了一次。我还以为是我哪写错了,寻找了好久... [ 查看全文... ]

卖萌无罪!纯CSS3绘画卡通人物头像~

23

January

2013

其实我也不知道为什么会画这个东西,估计是微博上多秀逗了...

今天画的这个东西,纯粹是练习+蛋疼+卖萌... 制作方法我就不说了,请查看我博客之前所写的一些关于CSS3的文章

支持:手机访问、Google Chrome(谷歌)、Firefox(火狐)、Opera(欧朋)、Safari
补充:如果你是用遨游、搜狗、猎豹、360等等,请尝试使用极速模式,不支持IE访问~ [ 查看全文... ]

jQuery左侧浮动折叠菜单 仿天猫(固定浮动、智能定位、CSS3折叠)

14

January

2013

以前做设计的那段时间,常常为了一个专题页面的制作,上各种网站寻找灵感,淘宝就是其中之一。由于现在“从良”了,对设计这方面关心的就比以前要少了,更多的精力便是放在页面结构和用户体验上。

前两天上淘宝时,发现其首页的菜单还不错(貌似很早就有了,不过我是才看到,刚从火星回来...),于是就自己也动手制作了一个。

CSS方面属于参考天猫,jquery则完全是自己摸爬滚打。折叠的效果运用了CSS3,对于不识别的CSS3的浏览器,就单纯的隐藏了,没有做过渡效果。

其中,不得不说,自己做的过程中又学习到了蛮多的东西,特别是CSS方面,有些属性虽然不起眼,感觉没有必要,但起到了关键的作用。

主要功能:1.固定浮动、2.智能定位、3.CSS3折叠 [ 查看全文... ]

CSS3 制作3D旋转球体

28

November

2012

今天的例子中,我主要想讲的是transform-style:preserve-3d和box-sizing:border-box这两个属性。

对于preserve-3d,这里要说明的是,它只影响这个元素的子元素(二级元素),孙元素(三级元素)如果也想拥有3D模式,那么就必须给它的上级元素(父元素)也添加preserve-3d。

box-sizing是我们平时比较少接触到的属性,其分辨有2个值content-box和border-box。
content-box:此属性表现为标准模式下的盒模型(当我们设置元素的width和height时,它的宽度不包括border和padding。例:width:100px; border-width:10px; 元素实际宽度为220px;)
border-box:此属性表现为怪异模式下的盒模型(和content-box相反,它的宽度包含border和padding。例:width:100px; border-width:10px; 此时的border相当于内边距,元素实际宽度仍为200px;)

好了,接下来我们就看例子吧:
[ 查看全文... ]

CSS3 绘制Windows 8 logo

27

November

2012

今天的内容非常简单,但有个比较关键的属性:perspective(透视)。所有元素都是放置在z=0的平面上perspective属性设置镜头到元素平面的距离(学过AUTOCAD的童鞋应该很容易理解吧)。是不是还有点云里雾里呢?我们来举个例子,想想你从天上俯看一座金字塔。镜头到元素平面的距离,就是塔的顶部(视点)和地面(Z-平面)之间的距离。

HTML CODE:

<div class="wrapper">
	<div class="logo"></div>
	<div class="logo_text">Windows 8</div>
</div>

[ 查看全文... ]