利用css3制作毛玻璃的图文实例分享
忙里偷闲,最近又在看许多比较酷炫的效果。现在基于jquery的插件比较多,但是很多插件的兼容性不是太好,所以原生的才是王道。在日常当中,毛玻璃已经不常见了,那是一个很久远年代的东西了。诺,下面就是毛玻璃:
哈哈,不闲扯了,接下来不如正题吧,先看一下终极效果:
嗯,好了,,开始我们的步骤吧:
第一步:进行页面的基本搭建:
我在body上设置了一张大大的背景图,然后中间部分是一个div,html代码如下:
<body> <div > iPhone 7 dramatically improves the most important aspects of the iPhone experience. It introduces advanced new camera systems. The best performance and battery life ever in an iPhone. Immersive stereo speakers. The brightest, most colorful iPhone display. Splash and water resistance.1 And it looks every bit as powerful as it is. This is iPhone 7. </div> </body>
文字多是为了撑开div使其效果更明显
css的代码如下:
body { min-height: 100vh; box-sizing: border-box; margin: 0; padding-top: calc(50vh - 6em); font: 150%/1.6 serif; background: url("http://www.jackzxl.net/wp-content/MyFile/2016/09/iphone.jpg") fixed 0 center; background-size: cover; } div { margin: 0 auto; padding: 1em; max-width: 30em; border-radius: 0.3em; box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset, 0 .5em 1em rgba(0, 0, 0, 0.6); text-shadow: 0 1px 1px hsla(0,0%,100%,.3); background: hsla(0,0%,100%,.3); }
看上面的样式代码,body里面,vh为视口大小,100为100%,background设置的为固定位置,铺满整个元素;在div当中,居中设置背景色然后设置其盒子样式;然后是这个样子滴:
亮堂堂的小透明玻璃就这么出来了,那么开始我们的毛玻璃加工吧
第二步:背景模糊的毛玻璃设置
在css当中,有同一个关于模糊度的设置,为
filter: blur(20px);
后面的数值为模糊度的大小,数值越大越模糊啊,但是目前只支持px,不支持百分比;
我们直接给div加这个样式是不行的,因为这样会连子都变得模糊,这个时候我们可以利用伪元素,即::before;
我们使用伪元素之前,需要给div加一个相对定位,由于伪元素使用模糊度以后会溢出整个div盒子,为了美观漂亮大气上档次,我们需要给div加overflow:hidden;即:
overflow: hidden; position: relative;
div的伪元素:
div::before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; filter: blur(20px); margin: -20px; background: url("http://www.jackzxl.net/wp-content/MyFile/2016/09/iphone.jpg") fixed 0 center; background-size: cover; }
在上面的css代码中我们可以看出,设置的模糊度,和div是重叠的,背景图也是和body一样的,最终效果如下:
以上是利用css3制作毛玻璃的图文实例分享的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

在 Vue.js 中使用 Bootstrap 分为五个步骤:安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选:自定义样式。可选:使用插件。

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

创建 Bootstrap 分割线有两种方法:使用 标签,可创建水平分割线。使用 CSS border 属性,可创建自定义样式的分割线。

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

如何使用 Bootstrap 按钮?引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本

要设置 Bootstrap 框架,需要按照以下步骤:1. 通过 CDN 引用 Bootstrap 文件;2. 下载文件并将其托管在自己的服务器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根据需要编译 Sass/Less;5. 导入定制文件(可选)。设置完成后,即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。

在 Bootstrap 中插入图片有以下几种方法:直接插入图片,使用 HTML 的 img 标签。使用 Bootstrap 图像组件,可以提供响应式图片和更多样式。设置图片大小,使用 img-fluid 类可以使图片自适应。设置边框,使用 img-bordered 类。设置圆角,使用 img-rounded 类。设置阴影,使用 shadow 类。调整图片大小和位置,使用 CSS 样式。使用背景图片,使用 background-image CSS 属性。

要调整 Bootstrap 中元素大小,可以使用尺寸类,具体包括:调整宽度:.col-、.w-、.mw-调整高度:.h-、.min-h-、.max-h-
