弹窗周围变模糊效果（css+js）

最新推荐文章于 2024-08-26 17:02:51 发布
最新推荐文章于 2024-08-26 17:02:51 发布
阅读量143 收藏
点赞数
文章标签： css javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68314577/article/details/131189784
版权

原理：因为元素存在冒泡的特性，所以要完成这个效果必须确保是在两个同级元素。

ps：自己也可以用其他的css样式来写出模糊的效果，可以配合b站的玻璃拟态，磨砂玻璃效果一起使用

 

 下面js代码就是获取关闭(close)和打开(open)，当点击open的时候给第一个div元素加上active样式，就是那个变模糊的。当点击close就移除active样式。

样式随便写的比较粗糙大概看看就行

 

 

 

萌新且暴龙战士
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
快视弹窗--CSS+JS制作
mengs
12-23 703
快视弹窗 教程地址：原文地址（YouTube） B站教程：原文转载（bilibili） 两个视频的内容相同，第二个为转载 以下代码为本人填写，转载请注明教程地址和本贴地址 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na...
CSS简单实现弹出框、输入框等的背景幕布（半透明、变暗、变模糊）效果，模仿苹果官网导航块的半透明效果。
ljinest
09-22 2679
需求提要 我们如果想写一个效果类似弹出框的组件，首先简单分析一下弹出框的几个特性： 弹出框肯定位于当前页面的最顶端，并且在弹出框关闭之前，其他控件都无法点击、focus等。 为了更好突出弹出框的效果，除了弹出框以外的部分，我们可以加上一个幕布（英文为backdrop）效果，让背景的元素模糊、半透明、变暗等等，让用户的注意力能够完全集中在弹出框之中。 弹出前： 弹出后： 需求分析 把弹出框设定到当前页面的最顶端很简单，我们很快就能想到用Z-index去实现，把Z-index设定到一个足够大的值（取
前端实现弹窗后，弹窗下的部分盒子的内容css加模糊效果
weixin_43848571的博客
06-22 472
实现效果如图： // 定义实现模糊效果的类名 .filter { filter: blur(3px); -webkit-filter: blur(3px); // 数字越大模糊效果越明显 } 实现过程： 点击弹窗的时候，将 filter 类名赋给需要模糊的盒子，弹窗关闭的时候，将 filter 类名移除即可。 ...
CSS设置背景模糊的实现方法
09-22
主要介绍了CSS设置背景模糊的实现方法,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
CSS 弹框背景变模糊或者加遮罩
weixin_51747462的博客
12-28 1707
CSS 使弹框背景页面变模糊 给弹框加遮罩
用css写背景模糊的三种情况
weixin_73529240的博客
11-02 9025
今天一下午什么都没干，只搞了这个模糊效果和动画还有一个发光按钮的效果，不过当真正攻克难关的时候还是感觉很开心的，一定一定要把基础知识掌握牢固（比如overflow和after的两个引号），其实最难的往往还是最基础的知识，因为东西就这么多，就摆在这里，再多的花样也逃不出这些基础知识的范围，花活谁都会整，有基本才是硬道理。关关难过关关过，前路漫漫亦灿灿嘛。
弹窗模糊css,DIV+CSS弹窗
weixin_33089349的博客
08-03 162
DIV+CSS弹窗2018-12-01.AsaiDivBG{display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;background-color:white;z-index:1001;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);}.AsaiDivSh...
css-形状边缘模糊处理
qq_39111074的博客
01-24 1万+
可以使用 box-shadow 给形状加一个阴影效果： eg: box-shadow:0 0 10px 10px #9fb1c5; 前面两个参数为 0 ，阴影就是围绕形状边缘一圈 box-shadow: h-shadow v-shadow blur spread color inset; h-shadow: 必需的。水平阴影的位置。允许负值 v-shadow: 必需的。垂直阴影的位置。允许负值 blur: 可选。模糊距离 (控制模糊程度，数值越大越模糊) spread: 可选。阴影的大小（数值越大，阴影越大
JS+CSS3制作炫酷的弹窗效果
10-21
本文将详细介绍如何使用JavaScript（JS）和CSS3来创建一个炫酷的弹窗效果，特别强调背景模糊这一特色，使得弹窗看起来更为高端。 首先，弹窗的实现通常包括两个主要部分：弹出窗口层（popus）和遮罩层（mask）。...
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
10-18
js弹窗js弹出DIV,并使整个页面背景变暗 <!--按钮--> ;width:80%;margin:0auto;height:1.5rem;line-height:1.5rem;text-align:center;color:#fff;margin-top:1rem;-moz-border-radius:.128rem;-webkit-border-radius...
CSS3实现带阴影边框效果弹出窗口
06-12
【标题】：“CSS3实现带阴影边框效果弹出窗口”是现代网页设计中一种常见的交互体验技术。这种效果使得用户在点击某个元素时，一个带有阴影边框的弹出窗口会在网页中央出现，通常用于展示图片、内容详情或者表单填写...
弹窗之背景模糊效果
a527749703的专栏
08-11 6337
**弹窗之背景模糊效果**
css 弹出模态框modals后背景如何高斯模糊？
weixin_34342207的博客
02-15 1192
{filter:blur(3px);-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);filter:url(blur.svg#blur);filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');} 高斯滤镜模板.zip 转载于...
解决position: fixed；弹框的中input自定义表单1px border看起来模糊问题
muzidigbig的博客
03-19 1114
出现的问题： 我们想要的效果： 结构： <body> 咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩 <div class="box"> <div class="box_bg"></div> <div class="box_bubble"> <h2...
如何在CSS3中创建模糊的文字效果
05-31 275
这里展示了一个伟大的文字效果我第一次看到克里斯Coyier的CSS技巧的网站 。 模糊文本可以在CSS3通过施加透明文本颜色和文字阴影创建： .blur-text { color: transparent; text-shadow: 0 0 5px #000; } 不幸的是，并不是所有的浏览器都支持文字阴影。 IE9及以下申请透明色，但没有阴影效果 - 文本将变为不可见。 我们必须要...
CSS实现背景模糊效果（高斯模糊）
Think____的博客
07-31 1万+
px值越大，越模糊，可以按照不同的类名给不同的模糊值，背景看起来会更好看一点 重点实现为： -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); 转自：h...
CSS3实现模糊背景的三种效果
热门推荐
CSU_Zipple的博客
10-31 13万+
不开头了，直接进入主题。 普通背景模糊效果如下： 使用属性：filter:(2px)普通背景模糊为了美观不能使背景前的文字模糊，而filter属性会使这整个div的后代并且还会出现白边。也就是说无法达到这个效果。怎么办呢？我们可以使用伪元素，这样我们也顺便解决了白边的问题。实现思路： 在父容器中设置背景，并且使用相对定位，方便伪元素重叠。而在:after中只需要继承背景，并且设置模糊，绝对定位
CSS中禁用DOM事件
最新发布
bingmoujs的博客
08-26 264
表示元素不应对鼠标事件进行响应。这包括鼠标的点击、悬停和其他鼠标相关的动作。这个属性指定当鼠标指针设备（如鼠标）在元素上时，事件应该有什么表现。
尚学堂HTML+CSS+JavaScript基础教程详解
“HTML+CSS+JavaScript教程 - 尚学堂手把手教学” 本教程涵盖了HTML、CSS和JavaScript的基础知识，由知名教育机构...CSS和JavaScript的知识点也会有相应深入的介绍，帮助学习者掌握网页设计和交互实现的核心技能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值