html5渐变色毛玻璃,基于CSS3实现的毛玻璃渐变效果

毛玻璃说白了就是磨砂玻璃。隔着表面粗糙的磨砂玻璃观赏窗外的风景，总会带着点朦胧美，给人以若隐若现的感觉，远近之间的层次感也因此而被体现出来。

这种效果不仅美观，而且可以通过清晰和模糊的对比来突出重点内容，因此被广泛应用于web设计领域。本教程我们也来制作一个这样的效果。

由于重点是毛玻璃，所以我们只简单地在背景图上面显示一个输入框，当鼠标点击输入框时，背景从清晰状态渐变到毛玻璃效果。也就是说，页面结构包含一个背景层和一个输入框，为方便控制，我们把输入框单独包在一个div上。

html基础代码如下:

显然，bg和input需要叠放在一起，因此内部必然需要绝对定位。

而外层的total则要显式设置相对定位，使内部元素定位的参考点在total层的左上角。

具体的css代码如下:

为了让每个层都能填满整个页面，我们把页面上的所有元素乃至html都设置为100%的宽高。

运行效果如下图所示

背景被重复填充了，所以我们应该让背景尺寸自适应一下。

这在早期的Web开发中是一件非常痛苦的事情，所幸CSS3提供的新属性background-size完美地解决了这一难题。

再次运行，背景的效果正确了，我们让input居中对齐

让input居中对齐的方法有很多，既然我们前面都用绝对定位，那此处也继续沿用该方法。

运行效果如下图所示

看起来好像有点偏右了，实际上，居中对齐的参考点是文本的左上角，所以整个文本就不居中了。那我们要如何实现以文本框的中点作为参考点呢？

方法很多，这里我们用CSS3提供的transform属性来完成:

通过向左向上移动一半，参考点就位于文本正中心了。

我们再根据背景适当美化一下输入框。用圆角矩形，黑色背景，白色字体等设置完成美化的工作。

运行效果如下图所示

现在，我们就让用户在单击输入框的时候背景变模糊，但是文本和输入框如何关联呢？不借助javascript，处理起来相当困难，但是我们可以换个思路，就是用背景失去焦点代替单击输入框。

这样，我们就可以利用focus伪类控制效果变化了，这时候，默认状态应该是模糊的。

模糊用的是CSS3滤镜，属性名为filter。具体代码如下:

这几行的功能完全一致，不同前缀用于兼容不同的浏览器。

再次运行，背景变模糊了，效果如下图所示

为了让文本失焦，即背景获得焦点的时候恢复清晰，我们在focus伪类上让blur的大小恢复为0。

运行没有任何效果，问题出在哪了？

发现了吗？input层我们设置了宽高为100%，所以会挡住整个bg。为此，我们要调整一下input层的尺寸，也就是说，textField所有的宽高信息都要转移到input上，然后textField的宽高为100%。

再次运行，鼠标在文本框以外的地方点击，背景就恢复清晰了。如下图：

最后，就是两种状态的过渡了。这里CSS3又帮了我们的大忙，利用transition属性即可轻松实现过渡。

这段代码代表每个背景层会在0.5秒内完成两个状态之间的平滑过渡。4行代码功能相同，不同前缀用于兼容不同的浏览器。

再次运行，大家就能看到背景从清晰到毛玻璃效果的缓慢过渡了。

这是一篇相对基础的CSS3教程，细心的朋友可能会发现边缘在模糊的时候会有点发白。这是因为边缘位置的周边存在没有颜色的像素，所以模糊的时候会呈现为透明边缘，从而透出页面的白色背景，要修正这个bug，我们可以通过裁剪div来实现，但这部分不需要CSS3来完成，因此，为了让大家把注意力集中在CSS3的功能上，本教程就不再深入讲解了。

html5渐变色毛玻璃,基于CSS3实现的毛玻璃渐变效果相关推荐

【HTML5示例代码分享】基于CSS3和jQuery的相片墙效果
一款基于CSS3和jQuery的相片墙,效果非常酷.支持鼠标滚轮退出当前图片. UDE 模拟调试效果图: 附××× 转载于:https://blog.51cto.com/cmccude/1272181
【HTML5示例代码分享】基于CSS3和jQuery的相片墙-ImageWall
基于CSS3和jQuery的相片墙,非常酷. 支持鼠标滚轮退出当前图片. 源码下载 http://download.csdn.net/detail/cmcc_ude/5926477 感兴趣的童鞋可 ...
Arctext.js - 基于 CSS3 jQuery 的文本弯曲效果
Arctext.js 是基于 Lettering.js 的文本旋转插件,根据设置的旋转半径准确计算每个字母的旋转弧度并均匀分布.虽然 CSS3 也能够实现字符旋转效果,但是要让安排每个字母都沿着弯曲路 ...
html5桌面系统,基于HTML5的IVI桌面系统及本地功能扩展研究实现
摘要: 随着汽车技术以及互联网技术的发展,智能化车载信息娱乐系统(IVI:In-Vehicle Infotainment)已经成为汽车工业未来发展的新方向.目前,在用于开发智能化车载信息娱乐系统的大量 ...
html5全景校园,基于HTML5的校园全景漫游系统研究与实现
摘要: 虚拟现实技术在旅游.智慧城市.数字校园.医疗.交通.文化教育.航空航天.文物保护.工业仿真.建筑仿真.军事.空间技术等领域得到广泛的应用.全景技术是虚拟现实技术的一个分支,相对于传统的三维建模 ...
基于css3 transform实现散乱的照片排列
分享一款基于css3 transform实现散乱的照片排列.这是一款简单零散的css3相册排列特效下载.效果图如下: 在线预览源码下载实现的代码. html代码: <div class ...
Codrops 优秀教程：基于 CSS3 的全屏网页过渡特效
向大家分享一个来自 Codrops 的基于 CSS3 实现的全屏网页过渡特效.页面初始布局是四个盒子,点击其中一个会扩张到全屏,其它的会淡出隐藏:关闭当前视图的时候又恢复到初始状态. 您可能感兴趣的相 ...
Codrops 教程：基于 CSS3 的精美模态窗口效果
Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...
9款基于CSS3 Transitions实现的鼠标经过图标悬停特效
之前给大家分享了很多css3实现的按钮特效.今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.O ...
清爽登录界面html,基于css3实现扁平简洁清爽的登录注册页面代码
今天给大家分享一款基于css3实现扁平简洁清爽的登录注册页面代码,使用浅色设计,兼容移动设备,加入了基本的表单验证,适合大部分网站. 代码很简单有css样式,index.html两部分代码.感兴趣的朋 ...

html5渐变色毛玻璃,基于CSS3实现的毛玻璃渐变效果

html5渐变色毛玻璃,基于CSS3实现的毛玻璃渐变效果相关推荐

最新文章

热门文章