首页

关于

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

在线演示

我们想要展示如何利用CSS3 clip属性制作一种简单而整洁的扩展效果,当点击一个box元素时实现平稳过渡。这个想法是为了实现某种叠加效果,好像它实际上在各个元素的下面。点击其中一个元素将创建一个切断图片的效果,展示将被宽展开的另一层。

更多相关前端技术内容,请关注极客标签

怎样做?

首先,我们要创建一个项目列表,它将看起来像是装满不同城市名称的盒子:

每 一个箱子将包含一个元素(覆盖层),该元素的位置将被固定。实际上这个元素会铺满整个页面,但我们不会看到它,因为透明度opacity将被设置为0。当 我们点击一个盒子,我们将使用clip:rect()修剪各自的内部固定元素。然后我们将动态展示所有叠加的宽度和高度,做为整个视窗:

单击关闭按钮将反转这个效果,并且使列表项的大小最小化并消失。

那么,让我们从HTML开始吧!

标记:

我 们将为这些盒子使用一个无序列表。每个列表项将会有一个图标类和一个可选的"span"类,将控制盒子的宽度。在里面将添加一些文本和覆盖的层。叠加的部…

标签: jQuery, css, html, 扩展覆盖效果, clip属性

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.