当前位置:编程学习 > html/css >>

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

  在线演示
我们想要展示如何利用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;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    line-height: 3;
    opacity: 0.4;
    text-align: right;
    pointer-events: none;
}
温度显示效果是半透明的,我们为它的opacity添加一个过渡:
.rb-temp {
    display: block;
    font-size: 2em;
    opacity: 0.5;
    transition: all 0.3s ease-in-out;
}
当悬浮在一个列表项上,我们简单增加:
.rb-grid li:hover .rb-temp {
    opacity: 1;
}
现在,让我们看一看重要的重叠部分。最后的视图,我们是想要一个全屏范围的重叠效果,所以我们将把它的宽度和高度设置到100%。我 们不希望它是相对于任何东西,而是希望它在顶部,所以要给它固定了位置。因为这将让它出现在所有东西的顶部,会有重叠,很多重叠!这时需要在初始时设置 z-index为-1。这将把它们统统放在内容页面的后面。设置opacity为0会使他们不可见:
.rb-overlay {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.4s ease;
    z-index: -1;
    pointer-events: none;
    cursor: default;
}
这就是初始状态的叠加。一旦我们点击列表项,将为clip属性设置正确的rect()值,动态扩展。
让我们看看其余的样式。
每个叠加层有点接近“按钮”,将被定位在右上角:
.rb-close {
    position: absolute;
    top: 0.4em;
    right: 0.4em;
    width: 2em;
    height: 2em;
    text-indent: -9000px;
  &nb
补充:web前端 , HTML/CSS  ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,