Html设计小技巧之毛玻璃效果

最新推荐文章于 2024-07-02 17:52:33 发布

回忆彡美好

最新推荐文章于 2024-07-02 17:52:33 发布

阅读量584

点赞数 12

分类专栏： Html设计文章标签： html css 开发语言

本文链接：https://blog.csdn.net/weixin_66448747/article/details/136262833

版权

Html设计专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了如何通过CSS和HTML实现毛玻璃效果，包括代码示例和关键属性如backdrop-filter和BoxShadow的使用。

摘要由CSDN通过智能技术生成

Html设计小技巧之毛玻璃效果

1. 效果展示

2. 代码展示

CSS代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* 居中对齐 */
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 线性渐变 */
  background: linear-gradient(lightblue 10%, lightskyblue 40%, DodgerBlue 70%);
}
/* 使用::before和::after效果不好 */
.main, .before, .after {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(30px);
  opacity: 0.5;
  /* 设置外阴影蓝色和内阴影白色 */
  box-shadow: 20px 20px 40px 5px DeepSkyBlue, inset 2px 2px 10px white;
}

.main {
  /* 文字居中对齐 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 500px;
  /* 添加外阴影：白色 */
  box-shadow: 20px 20px 40px 5px DeepSkyBlue, inset 2px 2px 10px white, 
  -10px -10px 30px white;
  z-index: 0;
}

.before {
  position: absolute;
  top: 60%;
  left: 60%;
  width: 250px;
  height: 250px;
  z-index: -1;
}

.after {
  position: absolute;
  bottom: 60%;
  right: 60%;
  width: 250px;
  height: 250px;
  z-index: 1;
}

a {
  color: white;
  font-size: 36px;
  z-index: 1;
  /* 取消下划线 */
  text-decoration: none;
}

HTML代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Html小技巧之毛玻璃特效</title>
  <link rel="stylesheet" href="css/001.css">
</head>

<body>
  <div class="before"></div>
  <div class="main">
    <a href="#">Backdrop Filter</a>
  </div>
  <div class="after"></div>
</body>

</html>