程序员人生 网站导航

纯CSS3透明水晶盒的实现

栏目:htmlcss时间:2014-05-01 04:52:10

打过了趟深圳回来后,已经快半个月,在广州购书中心逛了下,发现2本前端书《重构HTML-改善WEB应用的设计》、《CSS3 实战》,看了一半《重构HTML》,发现看不下去,里面写的感觉不是很受用,可能是现在水平有限,参透不了,于是放下看《CSS3》。之前脑子里面的CSS3都是在网上看的。这次买了本书,踏踏实实的打个大框架出来,免得过段时间不用又乱了文理,基本把书过了一遍后,手也就痒痒的,想做个东西出来。

相信大家有看过这个例子:3D盒子,应该他是最早这样写的吧,书上第282页有个综合实战“设计动态立体盒子”的例子,实现方式跟它一样,我的盒子也是以它为原型来设计的,不过在实现方面有做修改、优化,以及增添了一些细节,下面是我的盒子Firefox截图:

纯CSS3透明水晶盒

  1. 透明化了盒子,通透性强了,因为透明了,所以背部的三个面也就要做出来了,所以总共6个面,比原作多3个;
  2. 投影镜像,让盒子的立体感更强烈;
  3. 边角线的处理,让盒子面与面之间过渡和谐

你可以点击这里下载 源代码(只是写了moz下的效果,webkit的就没写了)

盒子的HTML结构很简单,如下:

一个大盒子包住“前、后、左、右、上、下”6个面,因为定位产生层高的关系,所以它的顺序其实是“后、下、左、前、上、右”,下面的div就会自然的叠在上面,就可以不写z-index了。

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐