ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS3勉強記(5) - ページマスク効果_html/css_WEB-ITnose
CSS3勉強記(5) - ページマスク効果_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:35:141391ブラウズ
今日はページマスクの効果を共有します。以前は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 までご連絡ください。