这是我参与8月更文挑战的第16天，活动详情查看：8月更文挑战
毛玻璃效果后续
在介绍如何生成平行四边形之前，之前我的一篇文章纯CSS生成毛玻璃效果，有用户评论说backdrop-filter: blur(xxx);这个属性。
所以先来了解一下这个backdrop-filter是个什么样的属性？
先来看一下效果，如下图所示，可以说非常不错。
完整代码：
<!DOCTYPE html>
<title>毛玻璃效果</title>
<body>
<div class="background-box">
<div class="txt-box">
文字内容, 毛玻璃效果:
backdrop-filter: blur(20px);
</div>
</div>
</body>
<style>
.background-box {
width: 800px;
height: 600px;
background: url("https://cdn.pixabay.com/photo/2021/07/12/19/49/landscape-6421773__340.jpg") 0 / cover fixed;
/* background-attachment: fixed; */
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.txt-box {
z-index: 2;
width: 600px;
height: 400px;
font-size: 20px;
font-weight: bold;
/* background: hsla(0, 0%, 100%, .3); */
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
backdrop-filter: blur(20px);
}
</style>
</html>
至此，我们又学会了一种简易的生成毛玻璃效果的方法！！！感谢Forx-Js。
平行四边形
transform可用函数中有个叫skew, 相关的还有skewX, skewY，我们来看一下效果。
但是存在一个严重的问题是文字也会随着整体变形而变形，那么如何使得文字不变动，只让图形变动呢？根据毛玻璃那篇文章的想法，我们将有色图形设置为文字元素下一层z-index: -1的伪元素，对伪元素使用skew函数使得其发生变形，而文字本身的DOM并不变，来看一下效果：
源代码如下所示：
<!DOCTYPE html>
<title>平行四边形</title>
<body>
<div class="box">
skewX(-45deg)
</div>
</body>
<style>
body {
width: 100%;
height: 100vh;
/*居中*/
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.box {
height: 200px;
width: 400px;
font-size: 30px;
/*居中*/
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
transform: skew(0, 0);
position: relative;
border: 1px solid black;
}
.box::before {
animation: skew 3s infinite;
background-color: lightblue;
content: ''; /* 用伪元素来生成一个矩形 */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: lightblue;
}
@keyframes skew {
from {
transform: skewX(0);
}
to {
transform: skewX(-45deg);
}
}
</style>
</html>
