纯CSS 毛玻璃效果
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第23天,点击查看活动详情
本文简介
点赞 + 关注 + 收藏 = 学会了
在我年轻时做过的开发中,毛玻璃应用得最广是在复杂的背景图上。
如果你希望在一个复杂的背景上添加文字,文字能清晰展示,并尽可能的保留原背景的话,使用毛玻璃的效果去处理是非常合适的。
本文主要讲解背景毛玻璃效果,也会讲讲文字如何做出模糊效果。
如果你懒得写代码,也可以使用 《这18个网站能让你的页面背景炫酷起来》 里面提到的 Glass Morphism 网站直接生成毛玻璃效果。
背景图毛玻璃
在 PhotoShop
中,毛玻璃主要使用 高斯模糊 和 羽化 。说白了就是模糊。
在 CSS
中,想要实现模糊效果,可以使用 滤镜 。背景通常设置成黑色、灰色或者白色,然后再设置一下背景的不透明度就能实现一个简单的毛玻璃效果。
要实现模糊,我使用的是 backdrop-filter: blur();
。
<style>
.box {width: 700px;height: 700px;display: flex;justify-content: center;align-items: center;background: url('http://k21vin.gitee.io/front-end-data-visualization/assets/bg01.13dfb262.jpg');background-size: 100%;background-position: center;
}.frosted__glass {width: 80%;height: 40%;border-radius: 40px;display: flex;justify-content: center;align-items: center;font-size: 60px;letter-spacing: 0.5em;backdrop-filter: blur(20px);color: #fff;box-shadow: 0 0 30px 10px rgba(0, 0, 0, .3);
}
</style><div class="box"><div class="frosted__glass">毛玻璃</div>
</div>
上面的代码中,backdrop-filter: blur(20px);
是重点。有了它就实现了毛玻璃的基本效果。
最后加上 box-shadow: 0 0 30px 10px rgba(0, 0, 0, .3);
让毛玻璃与背景之间产生一点阴影,看起来会更自然。
文字毛玻璃
文字版的毛玻璃效果其实也是一个模糊效果。
这个案例是鼠标移入文字时,文字变清晰;鼠标移出后变模糊。也是 纯CSS 可以做出来的。
重点是 text-shadow
的使用
<style>div {color: rgba(0, 0, 0, 0);text-shadow: 0 0 10px #000;cursor: default;transition: color 0.3s ease, text-shadow 0.3s ease;}div:hover {color: rgba(0, 0, 0, 1);text-shadow: none;}
</style><div>毛玻璃</div>
代码仓库
⭐纯CSS 毛玻璃效果
如果你对前端可视化方面感兴趣,我也提供了很多 demo
给你复制粘贴。
⭐仓库:前端数据可视化
如果你对 Fabric.js
这个 Canvas
的老字号库感兴趣的话,也可以看看我整理出来的 Demo。
⭐仓库:Fabric.js 学习资料
欢迎 Star
推荐阅读
纯CSS 毛玻璃效果相关推荐
- css毛玻璃效果白边_CSS3毛玻璃效果(blur)有白边问题的解决方法
做一个登录页,全屏背景图毛玻璃效果,实现方法如下: HTML: var w = window.innerWidth || document.documentElement.clientWidth || ...
- css毛玻璃效果白边_css3毛玻璃效果白边问题
注:css3毛玻璃效果应该很多人都知道怎么实现,但是有个问题是图片模糊了之后相当于缩小了,所以颜色深的图片会出现白边,这里说下我参考网上的解决方式吧! 1.毛玻璃实现方法: CSS3 blur滤镜实现 ...
- css毛玻璃效果白边_css3毛玻璃效果白边问题_html/css_WEB-ITnose
注:css3毛玻璃效果应该很多人都知道怎么实现,但是有个问题是图片模糊了之后相当于缩小了,所以颜色深的图片会出现白边,这里说下我参考网上的解决方式吧! 1.毛玻璃实现方法: CSS3 blur滤镜实现 ...
- css毛玻璃效果白边_使用css模拟vista毛玻璃效果
近来Windows Vista的毛玻璃效果一直受到界内同行的争相模仿.小弟不才,也来发表下自己的拙见. 首先准备两张背景图片,一张为正常图片,另外一张表现为正常图片的模糊效果. 利用css里面对背景的 ...
- 有意思:textarea resize属性下纯CSS交互效果
一.众所周知的 众所周知,文本域(textarea)在FireFox或Chrome浏览器下,右下角有个可以拖拽的标志. 有人保留,有人嫌碍事,直接resize:none;掉,但是,估计没人利用整个儿做 ...
- css毛玻璃效果—附:子盒子背景跟随父盒子背景
今天写了一个毛玻璃效果的网页,再次进行总结: HTML: <div class="whole"><div class="login">& ...
- css毛玻璃效果/el-progress进度条渐变/axios的基本使用/跨域配置/关闭eslint验证
css磨砂效果 效果图 实现方法 <!DOCTYPE html> <html lang="en"><head><meta charset= ...
- html盒子毛玻璃效果,css毛玻璃效果(外加background属性)
前因: 后果,二话不说,上效果: 注意:此方法只适合body设置背景图时的模糊. 页面布局方面,主要父元素为body,子元素为想要的效果,涉及到的知识点:background.filter.定位.伪元 ...
- html+css 毛玻璃效果
B站那个毛玻璃效果挺不错的,尝试着弄了一下 两种方法原理一样 方法一: 效果图: html 代码 <!DOCTYPE html> <html><
最新文章
- 051 日志案例分析(PV,UV),以及动态分区
- 小工匠聊架构-超高并发秒杀系统设计 06_数据一致性
- MyBatis-25MyBatis缓存配置【集成Redis】
- 再见了, VS Code!
- JVM监控及诊断工具-命令行篇一
- Fiddler的介绍和配置
- java isempty_Java ArrayDeque isEmpty()方法与示例
- Linux下第一次使用MySQL数据库,设置密码
- php 服务定位,服务定位器(Service Locator)
- Java 8 golang 1.8_Java8 新特性(一) - Lambda
- empty variable name
- String 字符串问题一
- LM5117 学习板-BUCK 大功率降压稳压模块 8~52V输入 5~28 V 8A 输出
- 支付宝对账单CSV解析
- c语言青蛙游戏,c语言:一只青蛙一次可以跳上1级台阶,也可以跳上2级。求该青蛙跳上一个n级的台阶总共有多少种跳法?...
- thinkAdmin 微信公众号授权
- 微信小程序GET请求总,如果参数中出现'+ ',' '加号符号,发送到后台会出现空格
- java eclipse怎么下载_javaeclipse简介(附下载地址和安装包)
- 【单例模式】Python Singleton
- 矩阵的对数运算公式_2021高考总复习数学对数与对数函数
热门文章
- Mac常见问题:如何在Mac中查看多张图片
- Python实现摄像头实时人脸检测
- EasyCVR出现只有HLS协议可播放,其他协议均无法播放是什么原因?
- 版权问题某些资源无法下载
- android仿微信拍摄视频教程,仿微信视频拍摄UI, 基于ffmpeg的视频录制编辑(上)
- 开关磁阻电机的直接瞬时转矩控制(DITC)
- VUE项目学习(一):搭建VUE前端项目
- python索引右往左_Python字符串从左到右索引默认0开始的,最大范围是字符串长度少1...
- java简单学生成绩系统_JAVA 实现简单的学生成绩管理系统
- [附相应图片]HTML+CSS学成网首页制作基础案例