用CSS模拟魔兽世界技能冷却的效果

巧用div的边框厚度实现这种效果
服务器君一共花费了216.733 ms进行了5次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

效果演示

上面的效果看起来还不错吧。在网页里,除了用Flash,我们还是有不少方法可以实现它。

显然这种效果不复杂,一张背景图片,加上前面带有透明度的多边形图层,在脚本控制下就可以转起来了。但问题在于用什么方法来构建这个多边形?

在IE下可以用VML,其他浏览器可以用Canvas等等。虽然行的通,但都不是最简单的。仔细分析下,该效果本质就是若干个三角形拼接而成。而三角形,如果你熟悉CSS2的话,一定在哪个地方见过。。。

首先来看一个100*100尺寸的div,他有4条彩色的边框。当然,此时你看不出什么。现在我们把div的边框宽度设置成50px。你发现什么了?边框与边框之间的交界处正好是条斜线。现在我们把div的长宽都设置成0,并且试着改变每条边的边框宽度:

<style>
.demo3
{
    width: 0px;
    height: 0px;
    overflow: hidden;
    border-top: 20px red solid;
    border-right: 30px green solid;
    border-bottom: 40px blue solid;
    border-left: 50px #000 solid;
}
</style>
<div class="demo3"></div>

我们对其上右下左分别设置了20 30 40 50px的边框宽度,这时就是呈现出一个不规则的三角形了。我们还可以通过设置边框颜色为transparent????????????,让指定的边框隐藏掉(只指定一个方向上单独的边框是不会显示出来的,至少要指定两个相连的方向才能显示出来,所以要把不该出现的方向上的设置成透明)。例如:

<style>
.demo4
{
    width: 0px;
    height: 0px;
    overflow: hidden;
    border-left: 50px #000 solid;
    border-top: 20px red solid;
    border-right: 0px green solid;
    border-bottom: 0px blue solid;;
}
</style>
<div class="demo4"></div>

但是我们只需其中一种颜色,所以要把另个边框的颜色设置成透明。值得注意的是,IE6下边框颜色不支持?transparent值,始终显示为黑色,所以需要用个hack针对ie6,用chroma滤镜过滤掉黑色。

<style>
.BG5
{
    background: #CC9900;
}
.demo5
{
    width: 0px;
    height: 0px;
    overflow: hidden;
    filter: alpha(opacity=60);
    _filter: Chroma(color='black') alpha(opacity=60);
    opacity: 0.6;
    border-left: 50px #000 solid;
    border-top: 20px transparent solid;
    border-right: 0px green solid;
    border-bottom: 0px blue solid;;
}
</style>
<div class="BG5">
    <div class="demo5"></div>
</div>

通过这个背景层,更好的看出其中一个边框设置成透明了。如此一来,我们只需创建若干个div,通过设置其边框来拼接成相应的多边形。

事实上我们可以利用边框两边的三角形,这样只需创建4个遮罩层。至于代码如何写,拿张草稿纸出来,在上面推算下就可以了。

本文地址:http://www.nowamagic.net/librarys/veda/detail/1070,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/1070

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《高性能网站建设指南》 桑德斯 (Steve Sounders) (作者), 刘彦博 (译者)

《高性能网站建设指南》结合Web2.0以来Web开发领域的最新形势和特点,介绍了网站性能问题的现状、产生的原因,以及改善或解决性能问题的原则、技术技巧和最佳实践。重点关注网页的行为特征,阐释优化Ajax、CSS、JavaScript、Flash和图片处理等要素的技术,全面涵盖浏览器端性能问题的方方面面。在《高性能网站建设指南》中,作者给出了14条具体的优化原则,每一条原则都配以范例佐证,并提供了在线支持。全书内容丰富,主要包括减少HTTP请求、ExpiresHeader技术、Gzip组件、CSS和JavaScript最佳实践、关闭ETags的技巧、Ajax缓存技术和最小化技术等。

更多计算机宝库...