backdrop-filter背面滤镜

最新推荐文章于 2024-05-09 15:49:41 发布

Bunny0212

最新推荐文章于 2024-05-09 15:49:41 发布

阅读量248

点赞数

分类专栏：前端文章标签：前端 css css3

本文链接：https://blog.csdn.net/weixin_46533577/article/details/133852422

版权

前端专栏收录该内容

89 篇文章 0 订阅

订阅专栏

backdrop-filter 背面滤镜

设置背景渐变

html 的结构比较简单，一个body和div就可以组成
思路是，用两个元素，底下的元素放图片，上面的元素当鼠标移入时背景变正常

<body>
  <div class="model"></div>
</body>

其次是 css 结构

首先是给 body 设置背景图，为上述的底层图，之后防止div将蒙版设置灰度，让整个图片看起来是灰色的
之后当鼠标移入时，让上层盒子宽度变为 0，之后加上过渡即可

* {
  margin: 0;
  padding: 0;
}

body {
  background: url(images/bg.jpeg) no-repeat;
  background-size: 100% 100%;
}

.model {
  width: 100vw;
  height: 100vh;
  transition: all 2s;
  backdrop-filter: grayscale(1);
}

body:hover .model {
  width: 0;
  height: 100vh;
}

在这里插入图片描述

当鼠标移入时，效果如下所示

在这里插入图片描述

磨砂玻璃效果

html 结构

<body>
  <div class="mask"></div>
  <div class="out">
    <h1>BACKDROP-FILTER</h1>
  </div>
</body>

css 结构

* {
  margin: 0;
  padding: 0;
}

设置了所有元素的外边距和内边距为零，以确保页面的内容不会被默认的外边距和内边距影响。

body {
  background: linear-gradient(to right, #feff00, #fa7c23, #b7236f, #90108f);
}

创建了一个从左到右的背景渐变，颜色由黄色、橙色、紫色和深紫色组成。

.mask {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 300px;
  border-radius: 20px;
  border: 1px solid #ccc;
  background: #ffffff5f;
  backdrop-filter: blur(3px);
  transition: all 2s;
  z-index: 1;
}

定义了一个遮罩层，它具有以下属性：

position: absolute：将元素的位置设置为相对于其最近的非静态祖先元素的绝对位置。
top: 50% 和 left: 50%：将元素的顶部和左侧边缘分别设置为其包含块的 50%。
transform: translate(-50%, -50%)：将元素向左上方移动其自身宽度和高度的一半，以便将其居中在页面上。
width: 500px 和 height: 300px：设置元素的宽度和高度。
border-radius: 20px：设置元素的圆角边框半径为 20 像素。
border: 1px solid #ccc：设置元素的边框为 1 像素的实线边框，颜色为灰色。
background: #ffffff5f：设置元素的背景颜色为白色半透明。
backdrop-filter: blur(3px)：将元素的背景模糊化，模糊程度为 3 像素。
transition: all 2s：将元素的所有属性的过渡效果设置为 2 秒。
z-index: 1：将元素的堆叠顺序设置为 1，以确保它在其他元素之上。

.out {
  position: relative;
  width: 100%;
  height: 100vh;
}

定义了一个名为 .out 的容器元素，它具有以下属性：

position: relative：将元素的位置设置为相对于其正常位置的位置。
width: 100% 和 height: 100vh：设置元素的宽度和高度分别为视口的宽度和高度。

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 66px;
  -webkit-text-stroke: 2px #fff;
}

定义了一个居中对齐的标题元素，具有以下属性：

position: absolute：将元素的位置设置为相对于其最近的非静态祖先元素的绝对位置。
top: 50% 和 left: 50%：将元素的顶部和左侧边缘分别设置为其包含块的 50%。
transform: translate(-50%, -50%)：将元素向左上方移动其自身宽度和高度的一半，以便将其居中在页面上。
text-align: center：将元素的文本居中对齐。
font-size: 66px：设置元素的字体大小为 66 像素。
-webkit-text-stroke: 2px #fff：将元素的文本描边为 2 像素的白色线条。

body:hover .mask {
  width: 0;
  border: none;
}

定义了一个鼠标悬停时的动态效果，它将遮罩层的宽度设置为零并将其边框删除，以使其消失。

全部的样式

* {
  margin: 0;
  padding: 0;
}
body {
  background: linear-gradient(to right, #feff00, #fa7c23, #b7236f, #90108f);
}

.mask {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 300px;
  border-radius: 20px;
  border: 1px solid #ccc;
  background: #ffffff5f;
  backdrop-filter: blur(3px);
  transition: all 2s;
  z-index: 1;
}

.out {
  position: relative;
  width: 100%;
  height: 100vh;
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 66px;
  -webkit-text-stroke: 2px #fff;
}

body:hover .mask {
  width: 0;
  border: none;
}