日期:2014-01-15  浏览次数:20943 次

网页制造aiyiweb文章简介:今天萌生一个想法,用css来实现透视效果。起初,我想到的是我们常见的添加暗影效果的方法,用多个div通过偏移来实现,但这需求很多 div,不够理想。随后,我想到css的一个属性:border,在border相连接处可以产生对角线效果。这样用两个div就可以实现,我们先看看最终效

今天萌生一个想法,用css来实现透视效果。起初,我想到的是我们常见的添加暗影效果的方法,用多个div通过偏移来实现,但这需求很多 div,不够理想。随后,我想到css的一个属性:border,在border相连接处可以产生对角线效果。这样用两个div就可以实现,我们先看看最终效果,然后再分析实现过程。

首先,我们看看border如何生成的对角线效果,在你的html的头部添加以下代码,你就会看到这样的效果

view sourceprint?
1..border{width:0;height:0;border-width:50px;border-color:#f00 #0f0 #00f #000;border-style:solid;}

有了上面的基础,我们就可以用两个额外的div来实现透视效果。

一、html代码如下:

view sourceprint?
1.<div class="perspective-outer">
2.    <div class="perspective-r"></div>
3.    <div class="perspective-b"></div
友情链接: 爱易网 云虚拟主机技术 云服务器技术 程序设计技术 开发网站 APP开发教程
Copyright © 2013-2024 爱易网页 当前在线:874人  网站在13时33分8秒内访问总人数:163076人 当前 12.93%  粤ICP备18100884号-2