本文介绍了如何使用CSS3实现HTML5毛玻璃渐变效果，通过设置背景模糊、绝对定位、居中对齐等技巧，实现背景在鼠标点击输入框时从清晰渐变到模糊的效果。教程详细解释了各个步骤，并展示了如何处理兼容性问题及过渡动画。
毛玻璃说白了就是磨砂玻璃。隔着表面粗糙的磨砂玻璃观赏窗外的风景，总会带着点朦胧美，给人以若隐若现的感觉，远近之间的层次感也因此而被体现出来。
这种效果不仅美观，而且可以通过清晰和模糊的对比来突出重点内容，因此被广泛应用于web设计领域。本教程我们也来制作一个这样的效果。
由于重点是毛玻璃，所以我们只简单地在背景图上面显示一个输入框，当鼠标点击输入框时，背景从清晰状态渐变到毛玻璃效果。也就是说，页面结构包含一个背景层和一个输入框，为方便控制，我们把输入框单独包在一个div上。
html基础代码如下:
显然，bg和input需要叠放在一起，因此内部必然需要绝对定位。
而外层的total则要显式设置相对定位，使内部元素定位的参考点在total层的左上角。
具体的css代码如下:
最低0.47元/天 解锁文章
扫一扫
1734
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
