Simulate the effects of World of Warcraft skill cooling with CSS

Effect Demo

The above effect looks good. In the Web page, in addition to flash, we still have a lot of ways to achieve it.

Obviously this effect is not complicated, a background image, plus a polygon layer with transparency in front, can be turned up under script control. But the question is, what is the way to build this polygon?

In IE you can use VML, other browsers can use canvas and so on. Although the line, but is not the simplest. Careful analysis, the effect of the essence is a number of triangular splicing. and the triangle, if you are familiar with CSS2 words, must have seen in which place ... Jurong e-Mao Steel

First look at a 100*100-sized div with 4 colored borders. Of course, you don't see anything at this point. Now we set the div's border width to 50px. What did you find out? The junction between the border and the border is exactly a diagonal line. Now let's set the width of the div to 0, and try changing the border widths for each edge:

<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>

We set the width of the border on the top right and left of the 50px, which renders an irregular triangle. We can also set the border color to transparent????????????, so that the specified border is hidden (only one Direction to specify a separate border is not displayed, at least to specify two connected to the direction to display, so should not appear in the direction of the set to transparent). For example:

<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>

But we only need one color, so we have to set the color of the other border to be transparent. It is worth noting that the IE6 bottom border color does not support the transparent value, always shown as black, so you need to use a hack for IE6, with a chroma filter to filter out the black.

<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>

Through this background layer, it is better to see that one of the borders is set to transparent. As a result, we only need to create a few div, by setting its borders to be stitched into the corresponding polygon.

In fact, we can make use of the triangles on either side of the border to create only 4 mask layers. As for how the code is written, take a draft of paper out, calculated on the above can be.

Simulate the effects of World of Warcraft skill cooling with CSS