纯css制作遮罩层特效

最新推荐文章于 2024-05-30 16:48:43 发布
最新推荐文章于 2024-05-30 16:48:43 发布
阅读量4.9k 收藏 13
点赞数 5
分类专栏： css 前端开发整理 文章标签： css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web_xiaolei/article/details/78202363
版权

css本身的功能就挺强大的，尤其是css3出来之后，大部分特效只用css3就能完成了，无需再费心思去想js怎么怎么做jQuery怎么怎么做。下面是用纯css制作的遮罩层效果：

原始页面，放了三张图片：
![原始图片](https://img-blog.csdnimg.cn/img_convert/3a2f098e4239db96ba5fb00f711370b2.png)
鼠标滑过第一张图片：瞬间加上遮罩层
![第一张图片](https://img-blog.csdnimg.cn/img_convert/52b865bfb6c19aa3cce710c5e64f81e0.png)
鼠标滑过第二张图片：遮罩层缓慢下拉下来
![第二张图片](https://img-blog.csdnimg.cn/img_convert/4bc6421be6f447a9d241b0230987e054.png)
鼠标滑过第三张图片：遮罩层缓慢的从中心位置旋转变大
![第三张图片](https://img-blog.csdnimg.cn/img_convert/669217de937ee2ccaf60405d33ef837b.png)
除了以上遮罩层的效果外，还可以配合css3的其他过渡效果、动画效果来完成更多复杂却很有趣的特效。
例子中完整代码如下：
``` 遮罩层
```
Eva-rascal
关注
  • 5
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5+css3 弹出遮罩层
09-22
这是一款使用html5 svg和css3制作的全屏遮罩导航菜单，这些遮罩层没有固定的大小但是它们全屏覆盖整个屏幕，可以说大小是以你的浏览器为准。默认是绿色背景，你完全可以换成其它颜色，这个不用我细说了吧。 请在现代浏览器中查看这些demo。 11个效果名称分别是： Huge Inc， Corner， Slide down， Scale， Door， Content Push，Content Scale， Corner Shape， Little Boxes， Simple Genie， Genie 英文看不懂请看演示。 第一个demo的灵感来自于Huge。这个效果使遮罩层淡入淡出，并使里面的内容带有一些3d旋转效果， 这里使用一些视觉差小把戏使遮罩层消失：我们为可见元素设置transition delay使透明度首先开始改变。 其他一些demo中我们使用了Snap.svg来制作SVG路径变形动画。
JS+CSS遮盖层
07-08
JS+CSS遮盖层，完全支持ie等主流浏览器，并解决在ie6下无法遮盖窗口级控件问题。
mask遮罩层详解
安歌
11-05 8177
mask简介 css的mask属性允许使用者通过部分或者完全隐藏一个元素的可见区域。这种效果可以通过遮罩或者裁切特定区域的图片。mask和background用法是相仿的，mask的值有这些： mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size mask-typ...
css属性mask遮罩
最新发布
bingmoujs的博客
05-30 358
可以设置 alpha（默认）表示使用遮罩图像的 alpha 通道，或者 luminance 表示使用遮罩图像的亮度。可以设置 repeat（默认）、no-repeat、repeat-x、repeat-y 等。: 定义遮罩的起始位置。可以设置 border-box（默认）、padding-box 或 content-box。: 定义遮罩的位置。可以设置具体的水平和垂直定位值，也可以使用关键字 center 居中对齐。可以设置具体的宽度和高度值，也可以使用关键字 auto 自动缩放。: 定义要用作遮罩的图像。
css 遮罩层
leixu1027的博客
10-16 410
css遮罩层涉及了div的定位固定和居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding:...
css-遮罩层
SqlloveSyn的博客
01-01 286
利用一个全屏、半透明的div遮住页面上其它元素。后减少了HTML界面的冗余。
css遮罩层
m0_51024444的博客
07-01 246
css遮罩层 定位和hover实现遮罩效果
CSS遮罩层
weixin_44282093的博客
07-19 9336
css遮罩层
css案例（一）遮罩层
xtcbql的博客
10-01 1657
css案例：遮罩层
纯CSS遮罩层特效
qq_43562926的博客
10-26 656
纯CSS众所周知就是只用CSS实现特效！ 在这里注释一下： 图片需要自己添加！ 这篇文章只详解CSS特效！ .demo{ padding: 30em; width: 360px; height: auto; } /* 背景颜色 渐变； 边框圆角 ；相对定位；多余边框隐藏；鼠标指针变成小手*/ .box{ background: linear-gradi...
Css-遮罩层
weixin_45328723的博客
04-22 6449
遮罩层原理 利用一个全屏、半透明的div遮住页面上其它元素 <style> .tudou { position: relative; width: 444px; height: 320px; background-color: pink; margin: 30px auto; } .tudou img {
css——遮罩层
spfLinux的博客
12-20 492
Document #all_con { display: none; background-color: #000; width: 100%; height: 100%; left:0; top:0;/*FF IE7*/ filter:alpha(opacity=30);/*IE*/ opacity:0.3;/*FF*/ z-index
CSS---遮罩层
weixin_42342065的博客
03-17 2544
CSS—遮罩层 前言：前端开发中经常会用到遮罩层功能，主要需求是：在页面(pc端和移动端)中自定义一个弹窗，当弹窗弹出的时候需要给整个页面加上遮罩层，同时也使页面中的点击事件没有效果。 思路：给遮罩层单独定义一个div。 案例代码： <div id = "body"> //显示页面的全部内容 <div id="open">打开弹窗</div> </div> //页面遮罩层 <div id="cover"></div> //页面弹
使用css给页面加上蒙层（类似遮罩层）效果
m0_57005111的博客
08-28 2213
vue前端加蒙层
CSS 实现遮罩弹窗效果
cuimingjia0524的博客
01-04 3566
CSS 实现遮罩层弹窗效果 原理： 写一个遮罩功能div，宽度高度均为100%，设置背景色，设置透明度，设置z-index 值为倒数第二大，目的为了在倒数第二层，把页面显示的内容给盖住！ 写一个弹出功能div，设置z-index 值为最大，目的要显示在最上层！ html代码： div id="body">显示页面的全部内容 div id="open">打开弹框div> d
css遮盖层
程序员聊聊
10-10 787
网上例子很多，但是缺乏一个从简开始的讲解，今天碰到了这个问题，这里拿出来跟大家分享下； 既然是从简开始，那么一些css效果在后续补上，关键是看怎么实现这个遮盖效果！ [color=red][b]实现遮盖的关键点是用position属性来对页面进行立体的分层，利用上层覆盖下层的原理来实现，如果不理解position属性的朋友可以先去看看我的另一篇博客[url]http://yo...
【Css小功能】遮罩层
It_sharp的博客
06-21 332
遮罩层 .box{ position:absolute; top:0; bottom:0; left:0; right:0; background:#000; opacity:0.7; &amp;lt;div class=&quot;box&quot;&amp;gt;&amp;lt;/div&amp;gt; }
CSS实现遮盖层
11-16 2465
大部分遮盖层都是通过JS去获取高度和宽度来定位的，而现在采用的大部分是CSS去做，除了一个为了兼容IE6所必要的js。 大致原理就是：让遮盖层的height和width达到100%来去实现，IE6下需要将body的height设为100%才有效。 具体的代码如下： CSS 实现遮盖层 /* the style for layer or mask */ body{_heig
css遮罩层怎么做
05-27
要创建一个 CSS 遮罩层，需要使用 CSS 的 `position` 和 `z-index` 属性。下面是一个简单的 CSS 遮罩层的实现： 首先，在 HTML 中创建一个遮罩层的容器，可以使用一个 `div` 元素来实现。例如： ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值