CSS3 Study Notes (5)-page mask effect, css3 Study Notes

CSS3 Study Notes (5)-page mask effect, css3 Study Notes

Today, I will release the page mask effect. Previously, the masks were implemented in JS. Suddenly, I found that the box-shadow attribute in CSS3 is not only used for stereoscopic shadow, you can also mask pages ~~~~

The following describes the dynamic results:

It can be seen that when the mouse is hovering over the button, the mask of the entire page will appear. Of course, to adjust the transparency is what is often seen on the webpage when the mouse is hovering over an image, the remaining images are masked to highlight the image. In fact, this effect is very simple ~~~~~

 

 

1. Main Program:

<! DOCTYPE html> 
There is nothing to say. It's very easy. Let's take a look at it ~~~~
 
 
Ii. CSS style (mainly CSS3)
Let's talk about the principle:
Box-shadow attribute: horizontal shadow position vertical shadow position shadow blur program shadow size shadow color is inner shadow;
Now that we know the principle, we can make the shadow size bigger than this page when hovering the mouse over the frame, so that we can cover it ~~~
.mask_layer{    width: 200px;    height: 30px;    border: 1px #7ed2ed solid;    background: #7ed2ed;    text-align: center;    line-height: 30px;    position: relative;    z-index: 999;}.mask_layer a{    text-decoration:none;    color: #323232;    font-weight: bold;}.mask_layer:hover{    box-shadow:0 0 0 9999px rgba(0,0,0,.4);    -webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4);   -moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4);   -ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4);   -o-box-shadow:0 0 0 9999px rgba(0,0,0,.4);}
Amount ...... do you want to vomit blood after reading the style? It's too easy ~~~~ I am sorry to write it out ~~~~~ Note that the framework must be placed at the top, so the z-index attribute must be used.