css实现遮罩层

最新推荐文章于 2024-05-30 16:48:43 发布
最新推荐文章于 2024-05-30 16:48:43 发布
阅读量258 收藏
点赞数
分类专栏： JavaScript 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/msnhce/article/details/102655785
版权
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>遮罩层1</title> <script src="E:/jquery/jquery-lib/jquery-3.2.1.js"></...
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>遮罩层1</title>
        <script src="E:/jquery/jquery-lib/jquery-3.2.1.js"></script>
        <!-- <link type="text/css" rel="styleSheet" href="hide1.css"> -->
    </head>

    <style>
        .background{
        width:100%;
        height:100%;
        background-color:rgba(32, 30, 30, 0.5);
        z-index:1000;
        display:none;
        position:absolute;
        text-align:center;
        font-size: 16px;
        box-shadow:0px 0px 5px black;
    }
    .hideBox{
        z-index:1100;
        width:600px;
        height:200px;
        background-color:white;
        position:fixed;
        right:30%;
        top:30%;
        position:fixed;
        box-shadow: 0px 0px 15px black;
    }
    .boxText{
        width:100%;
        he
最低0.47元/天 解锁文章
从来如此便对么
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 实现遮罩层弹窗效果
weixin_44445986的博客
11-20 472
CSS 实现遮罩层弹窗效果 原理： 写一个遮罩功能div，宽度高度均为100%，设置背景色，设置透明度，设置z-index 值为倒数第二大，目的为了在倒数第二层，把页面显示的内容给盖住！ 写一个弹出功能div，设置z-index 值为最大，目的要显示在最上层！ html代码： <div id="body"> 显示页面的全部内容 <div id="open"&g...
CSS实现遮罩层
热门推荐
mannix_lei的博客
05-03 2万+
&lt;div id="main"&gt; &lt;button @click="open"&gt;open&lt;/button&gt; &lt;div class="box" v-if="vm.dialogShow"&gt; &lt;div id="dialog" style="ma
css实现遮罩层动画
元仙僧的博客
11-15 3123
看效果 css <style> #cover{ text-align: center; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0,0,0,0.3); display:none; ...
css属性mask遮罩
最新发布
bingmoujs的博客
05-30 307
可以设置 alpha（默认）表示使用遮罩图像的 alpha 通道，或者 luminance 表示使用遮罩图像的亮度。可以设置 repeat（默认）、no-repeat、repeat-x、repeat-y 等。: 定义遮罩的起始位置。可以设置 border-box（默认）、padding-box 或 content-box。: 定义遮罩的位置。可以设置具体的水平和垂直定位值，也可以使用关键字 center 居中对齐。可以设置具体的宽度和高度值，也可以使用关键字 auto 自动缩放。: 定义要用作遮罩的图像。
CSS——遮罩层的实现
qq_43201350的博客
07-31 396
css——遮罩层的实现
通过css简单实现遮罩层
wsd02061112的博客
08-29 550
简单用css写一个遮罩层。
CSS遮罩层
weixin_44282093的博客
07-19 9314
css遮罩层
Css-遮罩层
weixin_45328723的博客
04-22 6441
遮罩层原理 利用一个全屏、半透明的div遮住页面上其它元素 <style> .tudou { position: relative; width: 444px; height: 320px; background-color: pink; margin: 30px auto; } .tudou img {
jquery+css 实现遮罩层
丽丽大神ing的博客
06-10 449
css代码 <style type="text/css"> .modal{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); } .modal-content{ width: 100%; max-width: 500...
css实现遮罩层高斯模糊，毛玻璃效果
业余前端的职业经历
01-25 4277
突然设计搞了一种想法，当遮罩层谈起来的时候，能不能搞一种模糊让用户看不清遮罩层下面的内容 然后ui小姐姐说，要是做不出来 就不做了，我说能做出来，怎么能让ui小姐姐看不起呢 先看下 加模糊滤镜之前的效果 然后加上模糊滤镜之后的效果呢 是不是很不一样呢 其实滤镜这个东西很多前端小伙伴都知道这个东西 filter 属性 则是 blur 单位是 px 其实上面的我设置了 5px 都很模糊了 都知道这个东西 但是 一次性就加成功 可能有点困难哈 <section> ...
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
10-25
比起使用注册页和登陆页，网站在当前页使用遮罩层注册和登陆的用户体验要好不少。这里使用jQuery和CSS实现一个简单的遮罩效果。
js css 实现遮罩层覆盖其他页面元素附图
01-21
(opacity=70);...z-index 必须大于遮罩元素 demo <!doctype html> <html> <head> <meta charset=utf-8> <title>无标题文档</title> <meta name=viewport content=width
使用CSS实现中间镂空的图片遮罩效果
09-24
主要介绍了使用CSS实现中间镂空的图片遮罩效果的方法,文中同时附带介绍了一个用CSS3实现的镂空一个圆形的代码示例,需要的朋友可以参考下
html元素的显示与隐藏：display属性，visibility属性
msnhce的博客
10-23 2万+
html元素的显示与隐藏 一、display属性 隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。 将一个元素默认设置为隐藏： <pid...
javascript子串之substr()和substring()
msnhce的博客
09-25 372
1.substr() stringObject.substr(start,length) 2.substring() stringObject.substring(start,stop) 与substr()和slice()方法不同，substring的参数不能为负数
javascript区分数组和对象
msnhce的博客
10-07 192
js中没有一个好的机制来区分数组和对象。typeof运算符报告数组的类型是‘object’，要确定一个对象是否是数组我们可以通过自己定义的isArray方法来判断。 先小结以下typeof运算符： 字符串、数字、布尔类型typeof运算符分别返回string, number, boolean。 typeof（null）返回object 自定义方法区分数组和对象： function ...
innerHTML与innerText区别
msnhce的博客
10-01 170
document对象中的两个属性innerHTML、innerText的作用 （1）获取对象的值 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>innerHTML</title> </head&...
用原生 Date 对象记录代码运行时间
msnhce的博客
10-01 123
不要让任何javascript代码持续运行50毫秒以上。 可以通过原生的 Date 对象来跟踪代码的运行时间，这是大多数javascript分析工具的运行原理： var start = +new Date(); //'+'加号将Date对象转化为数字 someLongProcess(); ... vart stop = +new Date(); console.log(start - ...
css 遮罩层 动画效果
08-26
要实现CSS遮罩层的动画效果，可以使用CSS的transition属性和animation属性。transition属性可以控制元素在不同状态之间的平滑过渡，而animation属性可以创建元素的动画效果。 下面是一个示例代码，展示了如何使用CSS创建一个遮罩层的动画效果： HTML代码： ```html <div id="cover"> <span class="whirly-loader">Loading...</span> </div> ``` CSS代码： ```css #cover { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; opacity: 0; transition: opacity 0.5s; } #cover.active { display: block; opacity: 1; } .whirly-loader { display: inline-block; animation: spin 1s infinite linear; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } ``` 在上述代码中，通过给遮罩层的display属性设置为none，初始时将其隐藏起来。当需要显示遮罩层时，给它添加一个active类，通过设置opacity属性和transition属性实现渐变显示的效果。 此外，还定义了一个名为spin的动画效果，通过设置transform属性和@keyframes规则来实现旋转的动画效果。通过给whirly-loader元素添加animation属性，使其应用该动画效果。 使用上述代码，你可以在需要的时候通过JavaScript代码添加或移除active类来控制遮罩层的显示和隐藏，并且遮罩层会有一个平滑的过渡效果和旋转的动画效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [css实现遮罩层动画](https://blog.csdn.net/weixin_42567389/article/details/103082984)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [Q定制云印刷在线DIY定制系统 v5.0 - PHP在线DIY定制系统下载](https://download.csdn.net/download/weixin_36643308/88248678)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值