自学前端之CSS实现毛玻璃效果
我们知道,页面中有一种非常好看的效果就是毛玻璃,我们先看一下效果图
接下来我们就具体实现一下这个效果
先看HTML
在body中设置一张背景图片
然后设置一个div,用来作为卡片,也是我们需要的毛玻璃的载体。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>野犬17--毛玻璃</title><link rel="stylesheet" type="text/css" href="./GroundGrassStyle.css">
</head>
<body background="resources/background.png"><div class="card"><h2>这是一个毛玻璃卡片</h2></div>
</body>
</html>
然后来看CSS
body
{/*设置布局*/display:flex;justify-content: center;align-items: center;min-height: 100vh;}.card
{/*设置布局*/position: relative;display: flex;justify-content: center;align-items: center;/*设置card的大小*/width: 980px;height:600px;/*设置阴影*/box-shadow: 20px 20px 50px rgba(0,0,0,0.5);/*设置圆角*/border-radius:15px;/*设置上边界和左边界亮纹,使card有一种层次感*/border-top: 1px solid rgba(255,255,255,0.5);border-left: 1px solid rgba(255,255,255,0.5);/*设置背景样式*/background: rgba(255,255,255,0.1);/*让透过card的底部元素模糊化,达到毛玻璃效果*/backdrop-filter: blur(5px);
}/*简单设置以下card中字体样式*/
.card h2
{position: relative;font-size: 3em;color: rgba(255, 255, 255, 0.15);
}
这么依赖,就实现了简单的毛玻璃效果。
其中的关键就在于backdrop-filter: blur(5px),它的作用是让透过该层的底部元素模糊化,blur的作用是设置模糊距离,数值越大,就越模糊,反之则会更清晰。
自学前端之CSS实现毛玻璃效果相关推荐
- UI妹子说我用CSS实现毛玻璃效果的样子很帅
前言 UI小姐姐问我,能不能做出透明加模糊的背景,而我当然是二话不说就说可以.因为我觉得没有什么是css实现不了的.更何况我要在她面前展现得我很厉害的样子. 开发起来 果不其然,在我打开蓝湖后,发现属 ...
- 纯css实现毛玻璃效果
2019独角兽企业重金招聘Python工程师标准>>> 最近有用到毛玻璃效果,在此记录,一方面方便以后使用,另一方面也分享给其他朋友. 先上图: 通过对比,就可以看到效果还是很不错, ...
- css实现毛玻璃效果
首先我们要知道实现毛玻璃效果的关键点:filter滤镜 html代码 <div class="main"></div> 先写一个居中的div,并给body加 ...
- 一行CSS实现毛玻璃效果
想要iOS上的那种毛玻璃设计,在百度搜索的前几排回答,实现效果实在是太复杂,而且不完美. 不完美之处是,百度的回答是将after伪元素设置背景图片后在虚化,这样的话不是背景图片不就虚化不了了吗?? 还 ...
- css 实现毛玻璃效果
前言 最近在参加一个项目的时候,需要实现毛玻璃的效果,一开始想简单的使用背景透明度rgba或者filter:blur,来实现. 遇到问题: 1.只使用透明度不能准确的实现毛玻璃的效果. 2.如果单独的 ...
- CSS揭秘——毛玻璃效果
为了方便把CSS写在一起了:点击测试 例子 <!DOCTYPE html> <html lang="en"><head><meta cha ...
- 关于css实现毛玻璃效果
参考: https://www.cnblogs.com/ghost-xyx/p/5677168.html 人家的效果图: https://darylxyx.github.io/Demo/blur 如果 ...
- 前端原生 CSS 跑马灯效果,无限轮播(横竖版本,带渐变遮罩,简单实用)
一.横版跑马灯 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
- 【css】毛玻璃效果,背景高斯模糊
关键属性:backdrop-filter 参考了Apple 官网,参数与 Apple 官网一致 // 背景高斯模糊 @supports (-webkit-backdrop-filter: satura ...
最新文章
- 【Qt】pro中使用DEFINES来实现条件编译
- 密码太多记不住?SSO帮你轻松访问VDI及外部资源
- css3 animation(左右摆动) (放大缩小)
- 【Verilog】基于Nexys4DDR开发板实现数字钟
- 浅谈Junit4和TestNG中的参数化测试
- XElement 和 XDocument 到底有什么区别?
- implements Serializable
- Android手势的识别
- python基础-字典的增删改查
- php正则循环,PHP正则解析多重循环模板示例
- java web scala_Springboot与scala编写第一个web程序
- linux 使用systemctl 启动服务报错: Error: No space left on device
- 信息化与计算机基础课课堂融合,高等学校计算机基础课程多元教学系列教材:网页设计与制作...
- gps高斯utm_UTM投影分带计算与高斯投影分带计算
- WinRAR去广告:只需六步,教你去除WinRAR的广告
- Webstorm配置less
- excel如何批量查询ip归属地?
- fri信号重构-sinc核滤波
- 专利代理机构代理专利流程
- xshell起图形界面后,鼠标点击不了