filter 属性定义了元素(通常是img)的可视效果(例如:模糊与饱和度)。
语法:
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()
使用效果: 查看demo
demo 是我的GitHub主页,当鼠标放在圆形上面的时候,圆形会旋转,这里主要应用了 animation 属性。而绿色圆形的下面那层投影的模糊效果则是运用了下面这条属性:
而完整卡片又该怎么写呢?
首先是它的 <html>结构:
CSS样式:
圆角背景:
圆形样式:
投影层的样式:
文字的样式:
如此,便可不用一张图,写出这张卡片了。
只是用到了css滤镜(filter)中的blur属性。CSS中的毛玻璃特效主要使用了filter属性里的blur()函数,也就是高斯模糊滤镜。
但是要做一个好的毛玻璃效果,需要注意很多细节。
滤镜属性被子元素继承了,这个纯css不能解决,这玩意子继承了父的模糊根本覆盖不了:
<body>
<div id="a">id=a这层单独放:图片背景+模糊滤镜</div>
<!-- 下面id=b这个div里面才放你网页主要结构 -->
<div id="b">
<div class="horizontal-scroll-area" style="width:3000px"></div>
<div class="horizontal-scroll-pips"></div>
</div>
</body>
然后:
----------------------------------------------------------------------
css 定位属性让 b 重叠在 a 上面合适位置
(给a、b外面再加个父级并相对定位,a、b分别绝对定位)
弄个js,判断 a、b 两个区域的高度,让矮的那个始终高度等于高的那个
(现成的js网上到处都是,自己百度)