实现毛玻璃效果
Posted windrunnermax
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现毛玻璃效果相关的知识，希望对你有一定的参考价值。
实现毛玻璃效果
使用CSS实现毛玻璃效果，使用CSS滤镜filter中的blur属性实现。
实现
首先定义一个填充满整个屏幕的背景。
<style type="text/css">
body{
width: 100vw;
height: 100vh;
margin: 0;
background-image: url("http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
</style>
然后定义一个指定长宽的div去实现模糊效果，因为直接在元素上使用blur会将元素以及子元素全部模糊，显然不符合要求，于是使用一个伪元素去实现模糊效果。首先在元素CSS属性设置position: absolute;是为了伪元素去适应长宽使用，使用relative也是可行的，但是会影响下文会提到的拖拽的定位，在伪元素中设置position: absolute;top: 0;left: 0;right: 0; bottom: 0;来继承元素的尺寸，在伪元素中设置背景，在背景上实现模糊效果就可以避免子元素一并模糊的问题。
<style type="text/css">
.blur {
position: absolute;
overflow: hidden;
z-index: 1;
width: 500px;
height: 300px;
cursor: move;
}
.blur::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
margin: -30px;
background-image: url("http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg");
background-position: center;
background-size: cover;
background-attachment: fixed;
filter: blur(10px);
}
</style>
为了更好的展示效果，实现了一个简单的拖拽功能。
<script type="text/javascript">
var element = document.querySelector(".blur");
element.onmousedown = function(event) {
var event = event || window.event;
var edgeX = event.clientX - element.offsetLeft;
var edgeY = event.clientY - element.offsetTop;
document.onmousemove = function(event) {
var event = event || window.event;
var relativeX = event.clientX - edgeX;
var relativeY = event.clientY - edgeY;
element.style.left = relativeX + "px";
element.style.top = relativeY + "px";
return false;
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
return false;
}
</script>
代码示例
<!DOCTYPE html>
<html>
<head>
<title>毛玻璃效果</title>
<style type="text/css">
body {
width: 100vw;
height: 100vh;
margin: 0;
overflow: hidden;
background-image: url("http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.container {
width: 100vw;
height: 100vh;
}
.x-y-center {
display: flex;
align-items: center;
justify-content: center;
}
.blur {
position: absolute;
overflow: hidden;
z-index: 1;
width: 500px;
height: 300px;
cursor: move;
}
.blur::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
margin: -30px;
background-image: url("http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg");
background-position: center;
background-size: cover;
background-attachment: fixed;
filter: blur(10px);
}
</style>
</head>
<body>
<div class="container x-y-center">
<div class="blur x-y-center">
<div>Gaussian Blur</div>
</div>
</div>
</body>
<script type="text/javascript">
var element = document.querySelector(".blur");
element.onmousedown = function(event) {
var event = event || window.event;
var edgeX = event.clientX - element.offsetLeft;
var edgeY = event.clientY - element.offsetTop;
document.onmousemove = function(event) {
var event = event || window.event;
var relativeX = event.clientX - edgeX;
var relativeY = event.clientY - edgeY;
element.style.left = relativeX + "px";
element.style.top = relativeY + "px";
return false;
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
return false;
}
</script>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www.jb51.net/article/73157.htm
https://www.cnblogs.com/ivan5277/p/10007273.html
https://blog.csdn.net/u010852544/article/details/43967749
以上是关于实现毛玻璃效果的主要内容，如果未能解决你的问题，请参考以下文章
iOS 8 模糊视图(毛玻璃效果)的简单实现UIVisualEffectView