CSS3 滤镜filter: blur()高斯模糊的应用

作者: 巴斯光年lip | 来源:发表于2017-07-04 23:54 被阅读0次

h5中简单的运动
CSS3 滤镜filter: blur()高斯模糊的应用
使用CSS:filter实现类PS操作
web前端入门到实战：CSS Blur() 将高斯模糊应用于输出
滤镜小结
4-3 视觉效果毛玻璃效果
css-高斯模糊(毛玻璃效果)
filter（滤镜）
图片模糊处理/计算盒子宽度calc函数/
css未掌握的样式

浏览器支持

使用效果：查看demo
demo是我的GitHub主页，当鼠标放在圆形上面的时候，圆形会旋转，这里主要应用了 animation属性。而绿色圆形的下面那层投影的模糊效果则是运用了下面这条属性:

    -webkit-filter: blur(2px);   /* Chrome, Safari, Opera */
    filter: blur(2px);

而完整卡片又该怎么写呢？
首先是它的<html>结构：

    <div class="z two">
        <div class="circle circle_two"></div>  /*圆形*/
        <span></span>  /*投影模糊层*/
        <h1>CSS</h1>
        <p>CSS3-日常练习</p>
    </div>

CSS样式：
圆角背景：

.z{
    width: 290px;
    height:420px;
    border-radius: 12px;
    display: inline-block;
    margin: 5px 20px;
    position: relative;
    cursor: pointer;
    -webkit-transition: all .7s ease-in-out;  /*过渡属性*/
    -moz-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
    background: #EFF9FA;
}
.z:hover {
    background: rgba(255, 255, 255, 0);  /*鼠标悬停时隐藏背景图层*/
}

圆形样式：

circle {
    width: 160px;
    height: 160px;
    border-radius: 50%;  /*圆角是边长的一半，塑圆形*/
    position: absolute;
    top: 50%;
    left: 50%; 
    margin-top: -115px;
    margin-left: -105px;   /*定位圆形相对于背景层的位置*/
    z-index:1;   /*圆形定位在背景层之前*/
    filter:alpha(opacity=30);  /*透明度*/
    -moz-opacity:0.3;  
    -khtml-opacity: 0.3;  
    opacity: 0.3;  
}
 /*设置圆形图案的渐变色*/
.circle_two {
    background-image: -webkit-gradient(linear, 120deg, from(#47fec4), to(#2689A7));
    background-image: -webkit-linear-gradient(120deg, #47fec4, #2689A7);
    background-image: -moz-linear-gradient(120deg, #47fec4, #2689A7);
    background-image: linear-gradient(120deg, #47fec4, #2689A7);
    box-shadow: 0 0 4px 4px #CDF1FD; 
}
@keyframes spin {
  to {transform:rotate(1turn);}  /*指定圆形的动画*/
}
.circle:hover{
    animation: spin 3s infinite linear;
    transform-origin: 90px 80px;
}

投影层的样式：

.z span {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: absolute;
    top:130px;
    left: 100px;
    -webkit-filter: blur(2px);  /* 高斯模糊 */
    filter: blur(2px);
    filter:alpha(opacity=40);   /* IE */
      -moz-opacity:0.4;   /* 老版Mozilla */
      -khtml-opacity: 0.4;  /* 老版Safari */
      opacity: 0.4;  /* 支持opacity的浏览器*/

/*填充圆形投影渐变色*/
    background-image: -webkit-gradient(linear, 120deg, from(#E9F6C2), to(#9edab0));
    background-image: -webkit-linear-gradient(120deg, #E9F6C2, #9edab0);
    background-image: -moz-linear-gradient(120deg, #E9F6C2, #9edab0);
    background-image: linear-gradient(120deg, #E9F6C2, #9edab0);
    box-shadow: -2px -2px 30px #94d0a6;  
}

文字的样式：

.z h1,.z p {
    margin-top:330px;  
    color: rgba(66, 121, 133, .6);
}
.z h1 {
    font-size: 18px;   
}
.z p {
    font-size: 14px;
    margin-top: 5px;
}

如此，便可不用一张图，写出这张卡片了。