CSS3勉強記(5) - ページマスク効果_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS3勉強記(5) - ページマスク効果_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:35 AM

今日はページマスクの効果を共有します。以前はJSを使用してマスクを実装していましたが、CSS3のbox-shadowプロパティは3次元の影を作成するだけでなく、マスクにも使用できることを発見しました。ページ~~~~

完成した動的効果を見てみましょう:

上の図からわかるように、マウスをボタンの上に置くと、もちろんページ全体のマスクが表示されます。透明度の調整は、Web ページでよく見かけるもので、マウスを画像の上に置くと、周囲の他の画像がマスクされ、この画像を強調表示する効果が得られます~~~。 ~~

1. メインプログラム:

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <link rel="stylesheet" href="css/mask_layer.css" type="text/css">    </head>    <body>        <p></p>        <div class="mask_layer">            <a href="#" target="_blank">透明遮罩</a>        </div>    </body></html>

ログイン後にコピー

言うことはありません、非常に簡単です、自分の目で見てください~~~~

2 つ目、CSS スタイル (主に CSS3) )

まず原理について話しましょう:

box-shadow プロパティ: 水平方向の影の位置、垂直方向の影の位置、影のぼかしプログラム、影のサイズ、影の色、内側かどうか影;

原理がわかったので、マウスがフレーム上にあるときは、ページがまだ大きいので、影のサイズをこれより大きくすることができます~~~

.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);}

ログイン後にコピー

うーん...文体を読んで血を吐きそうになりますか? とても簡単です~~~~書くのも恥ずかしいです~~~ ~~フレームを上部に配置する必要があることに注意してください。したがって、z-index 属性を使用する必要があります。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。