作者:夜飞羽 来源:mxria.com 时间:2012-02-21
这个灵感来自于RomanKomarov的《无需JS的Filter元素》
下面我们就来看看具体的内容。准备知识:CSS3的伪类选择器以及伪元素,CSS3过滤器。
1.基本框架
下面我们先建立基本的HTML页面结果,这部分比较简单,大家直接参考如下代码即可。包括一组radio选择框,共4个选项,设置为一个Group。点击每个button时,相应的图片出现或消失。动态部分利用了CSS3的缩放滤镜。
<section class="ff-container">
<input id="select-type-all" name="radio-set-1" type="radio" class="ff-selector-type-all" checked="checked" />
<label for="select-type-all" class="ff-label-type-all">All</label>
<input id="select-type-1" name="radio-set-1" type="radio" class="ff-selector-type-1" />
<label for="select-type-1" class="ff-label-type-1">Web Design</label>
<input id="select-type-2" name="radio-set-1" type="radio" class="ff-selector-type-2" />
<label for="select-type-2" class="ff-label-type-2">Illustration</label>
<input id="select-type-3" name="radio-set-1" type="radio" class="ff-selector-type-3" />
<label for="select-type-3" class="ff-label-type-3">Icon Design</label>
<div class="clr"></div>
<ul class="ff-items">
<li class="ff-item-type-1">
<a href="http://dribbble.com/shots/366400-Chameleon">
<span>Chameleon</span>
<img src="images/1.jpg" />
</a>
</li>
<li class="ff-item-type-2">
<!-- ... -->
</li>
<li class="ff-item-type-3">
<!-- ... -->
</li>
<!-- ... -->
</ul>
</section>
2.CSS样式部分
这部分内容分为4个部分:设置Button的样式,设置按钮被选中后的样式,设置Item形状的基本样式,设置动态变化后的样式,其中过渡效果使用transition。下面我一步步进行,最终获得利用按钮的伪类实现触发效果切换的目的。
Step1:定义ratio按钮的样式,代码如下,其中使用了一些UI的过滤器,如text-shadow,box-shadow等。背景设置上也使用了渐变。
.ff-container label{
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
width: 25%;
height: 30px;
cursor: pointer;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 33px;
font-size: 19px;
background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
float:left;
box-shadow:
0px 0px 0px 1px #aaa,
1px 0px 0px 0px rgba(255,255,255,0.9) inset,
0px 1px 2px rgba(0,0,0,0.2);
}
定义圆角
.ff-container label.ff-label-type-all{
border-radius: 3px 0px 0px 3px;
}
.ff-container label.ff-label-type-3{
border-radius: 0px 3px 3px 0px;
}
step2:定义按钮被选中的样式
.ff-container input.ff-selector-type-all:checked ~ label.ff-label-type-all,
.ff-container input.ff-selector-type-1:checked ~ label.ff-label-type-1,
.ff-container input.ff-selector-type-2:checked ~ label.ff-label-type-2,
.ff-container input.ff-selector-type-3:checked ~ label.ff-label-type-3{
background: linear-gradient(top, #646d93 0%,#7c87ad 100%);
color: #424d71;
text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
box-shadow:
0px 0px 0px 1px #40496e,
0 1px 2px rgba(0,0,0,0.1) inset;
}
step3:定义具体Item的基础样式
.ff-items a{
display: block;
position: relative;
padding: 10px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
margin: 4px;
width: 160px;
height: 120px;
}
.ff-items a span{
display: block;
background: rgba(113,123,161, 0.9);
font-style: italic;
color: #fff;
font-weight: bold;
padding: 20px;
position: absolute;
bottom: 10px;
left: 10px;
width: 120px;
height: 0px;
overflow: hidden;
opacity: 0;
text-align: center;
text-shadow: 1px 1px 1px #303857;
transition: all 0.3s ease-in-out;
}
.ff-items a:hover span{
height: 80px;
opacity: 1;
}
.ff-items li img{
display: block;
}
Step4:定义Item在触发后的样式变换。以缩放效果为例。
.ff-items li{
margin: 0px;
float: left;
height: 148px;
width: 0px;
transform: scale(0,0);
}
.ff-container input.ff-selector-type-all:checked ~ .ff-items li{
width: 188px;
transform: scale(1,1);
transition: transform 0.3s linear;
}
下面这段缩放相关的动画效果代码是整个案例的重点。
.ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1,
.ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2,
.ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3
{
transition: transform 0.3s linear, width 0s linear 0.3s;
animation: scaleUp 0.3s linear 0.4s forwards;
}
.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1),
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2),
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3)
{
animation: scaleDown 0.3s linear forwards;
}
@keyframes scaleUp {
50% { width: 188px; transform: scale(0,0); }
100% { width: 188px; transform: scale(1,1); }
}
@keyframes scaleDown {
0% { width: 188px; transform: scale(1,1);}
99% { width: 188px; transform: scale(0,0);}
100% { width: 0px; transform: scale(0,0); }
}
总结:关键代码如上,实现了图示的效果切换。其中checked伪类起到了类似Javascript中的onclick事件的作用,触发了具体的切换行为。而状态切换的动态效果则是利用animation来实现。本文基本涵盖了CSS3的全部新特性精华,在UI滤镜,行为伪类上给出具体的实际案例。注意,本文演示效果IE不支持,请在Chrome、Firefox等的最新版本中查看。