|
在线演示
我们想要展示如何利用CSS3 clip属性制作一种简单而整洁的扩展效果，当点击一个box元素时实现平稳过渡。这个想法是为了实现某种叠加效果，好像它实际上在各个元素的下面。点击其中一个元素将创建一个切断图片的效果，展示将被宽展开的另一层。
怎样做？
首先，我们要创建一个项目列表，它将看起来像是装满不同城市名称的盒子：
每 一个箱子将包含一个元素（覆盖层），该元素的位置将被固定。实际上这个元素会铺满整个页面，但我们不会看到它，因为透明度opacity将被设置为0。当 我们点击一个盒子，我们将使用clip：rect（）修剪各自的内部固定元素。然后我们将动态展示所有叠加的宽度和高度，做为整个视窗：
单击关闭按钮将反转这个效果，并且使列表项的大小最小化并消失。
那么，让我们从HTML开始吧！
标记：
我 们将为这些盒子使用一个无序列表。每个列表项将会有一个图标类和一个可选的“span”类，将控制盒子的宽度。在里面将添加一些文本和覆盖的层。叠加的部 分将包含一个列布局的结构。因为我们选择了一个虚拟的天气应用程序作为主题，所以我们将显示未来七天的天气预报。每个“day”列有一些span，用做工 作日、天气图标和温度：
<ul id=“rb-grid” class=“rb-grid clearfix”>
<li class=“icon-clima-1 rb-span-2”>
<h3>Lisbon</h3>
<span class=“rb-temp”>21°C</span>
<div class=“rb-overlay”>
<span class=“rb-close”>close</span>
<div class=“rb-week”>
<div><span class=“rb-city”>Lisbon</span><span class=“icon-clima-1”></span><span>21°C</span></div>
<div><span>Mon</span><spanclass=“icon-clima-1”></span><span>19°C</span></div>
<div><span>Tue</span><spanclass=“icon-clima-2”></span><span>19°C</span></div>
<div><span>Wed</span><spanclass=“icon-clima-2”></span><span>18°C</span></div>
<div><span>Thu</span><spanclass=“icon-clima-2”></span><span>17°C</span></div>
<div><span>Fri</span><spanclass=“icon-clima-1”></span><span>19°C</span></div>
<div><span>Sat</span><spanclass=“icon-clima-1”></span><span>22°C</span></div>
<div><span>Sun</span><spanclass=“icon-clima-1”></span><span>18°C</span></div>
</div>
</div>
</li>
<li class=“icon-clima-2”>
<h3>Paris</h3><span class=“rb-temp”>11°C</span>
<div class=“rb-overlay”>
<！-- ... -->
</div>
</li>
<li><！-- ... --></li>
<！-- ... -->
</ul>
让我们看看CSS：
一个无序列表将会集中在父结点，我们将会去掉列表样式：
.rb-grid {
list-style： none;
text-align： center;
margin： 0 auto;
}
列表项将有一个不固定的宽度，我们将给他们一个15em的高度。它将浮在左边：
.rb-grid li {
width： 24%;
height： 15em;
margin： 0.5%;
background： #8CC7DF;
color： #fff;
display： block;
float： left;
padding： 1.6em;
cursor： pointer;
position： relative;
}
网格内的项目有三种不同的宽度，“默认”的那个是24%，下面的其他两个是：
.rb-grid li.rb-span-2 {
width： 49%;
}
.rb-grid li.rb-span-4 {
width： 99%;
}
让我们给城市标题加些料：
.rb-grid li h3 {
font-size： 2.6em;
font-weight： 100;
}
为 图标字体添加一个CSS文件。它是Climacons字体，由Adam Whitcroft 创建。你可以查看climacons.css看看我们包括了哪个图标。基本上，我们使用图标类来添加带伪元素的图标。在网格里，我们希望他们是被绝对定位 在右下角，有点像被剥夺了权利。
.rb-grid li［class^=“icon-”］：before，
.rb-grid li［class*=“ icon-”］：before {
font-size： 10em;
（编辑：佛山站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
