实现毛玻璃效果
时间:2022-07-24
本文章向大家介绍实现毛玻璃效果,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
实现毛玻璃效果
使用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
- Golang不定参数
- Go并发编程基础(译)
- go-concurrent-programming.md
- Go语言并发模型:以并行处理MD5为例
- golang 使用json 包 实现序列化
- 【远古文章】用 Go 语言来看 Android! 出发, Android, 出发!
- Leaf 游戏服务器框架简介
- MongoDB 存储过程的使用以及性能调优方案
- [go语言]利用缓冲信道来实现网游帐号验证消息的分发和等待
- 【Golang语言社区--投稿专区】简单,好玩,有趣的命令行版12306(golang)
- 网游内存数据库的设计(1)
- 网游内存数据库的设计(2)
- Golang语言 上传文件
- Golang语言 监控文件变化小程序.
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- thinkphp调用sqlserver储存过程返回多个结果集
- php命名空间设计思想、用法与缺点分析
- Laravel5.1 框架登录和注册实现方法详解
- linux中叹号命令(!)的使用小结
- 基于opencv的selenium滑动验证码的实现
- Laravel5.1 框架文件管理操作实例分析
- 在 Linux 上锁定虚拟控制台会话的实现办法
- php遍历目录下文件并按修改时间排序操作示例
- laravel框架学习记录之表单操作详解
- php基于协程实现异步的方法分析
- Laravel框架实现多数据库连接操作详解
- Laravel5.1 框架Request请求操作常见用法实例分析
- 用python实现学生管理系统
- PHP CURL实现模拟登陆并上传文件操作示例
- python定义类的简单用法