将CSS CLIP属性应用在：扩张覆盖效果-HTML教程-爱易网页

将CSS CLIP属性应用在：扩张覆盖效果

日期：2014-05-17　浏览次数：20773 次

将CSS CLIP属性应用在：扩展覆盖效果

日期：2013-3-18 来源：GBin1.com

在线演示

我们想要展示如何利用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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。