CSS3学习笔记（5）-页面遮罩效果_html/css_WEB-ITnose
Jun 24, 2016 am 11:35 AM
今天把页面遮罩的效果发一下，之前遮罩都是用JS实现的，忽然发现CSS3里面的box-shadow属性除了做立体阴影外，还可以做页面的遮罩~~~~
下面来看一下完成的动态效果：
从上图可以看出，就是当鼠标悬浮在按钮上时，会出现整个页面的遮罩，当然调一下透明度就是网页中经常看到的当鼠标悬浮在一张图片上时，周围的其他图片都被遮罩了，这样就达到了突出这张图片的效果，其实这个效果做出来很简单~~~~~
一、主体程序：
<!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>
没什么可说的，很简单，自己看~~~~
二、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属性。
Article chaud
Outils chauds Tags
Article chaud
Tags d'article chaud
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?
Mar 04, 2025 pm 12:32 PM
Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Comment ajouter efficacement les effets de course aux images PNG sur les pages Web?
Mar 04, 2025 pm 02:39 PM
Comment ajouter efficacement les effets de course aux images PNG sur les pages Web?
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
Quel est le but du & lt; mètre & gt; élément?
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
Quel est le but du & lt; datalist & gt; élément?
Comment utiliser efficacement les liens HTML pour la navigation et le référencement?
Mar 18, 2025 pm 02:39 PM
Comment utiliser efficacement les liens HTML pour la navigation et le référencement?
