filter 属性定义了元素(通常是img)的可视效果(例如：模糊与饱和度)。
语法：
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
浏览器支持
使用效果：查看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;
}
如此，便可不用一张图，写出这张卡片了。
网友评论