扑克牌叠加效果css_使CSS剪辑生效：扩大叠加效果

扑克牌叠加效果css

View demo 查看演示 Download Source 下载源

Our previous article, Understanding the CSS Clip Property by Hugo Giraudel offers a great overview of the CSS clip property and the rect() function. Today we want to explore the practical side of it a little bit more. We are going to create a neat and simple effect for revealing some extra content and expanding a fullscreen overlay.

Hugo Giraudel撰写的上一篇文章“理解CSS剪辑属性”对CSS剪辑属性和rect()函数进行了很好的概述。 今天，我们想进一步探讨它的实际方面。 我们将创建一种简洁明了的效果，以显示一些额外的内容并扩展全屏覆盖。

We want to show how to leverage the CSS clip property to make a smooth transition when clicking on a box element. The idea is to show some kind of overlay as if it’s actually underneath the respective element. Clicking an element will create a cut-out effect, revealing another layer that will expand.

我们想展示在单击box元素时如何利用CSS clip属性进行平滑过渡。 这个想法是要显示某种叠加层，就像它实际上位于相应元素的下面一样。 单击一个元素将创建一个剪切效果，显示另一个将扩展的图层。

This is how we’ll do it: we will first create a list of items that will look like metro-style boxes:

这是我们的操作方式：我们将首先创建一个看起来像地铁样式的盒子的物品清单：

Each one of the boxes will contain an element (overlay) that will be of position fixed. This element will actually spread over all the page but we won’t see it because the opacity will be set to 0. When we click on a box, we’ll use clip: rect() to crop the respective part of the inner fixed element. Then we will animate the clip to reveal all the width and height of the overlay which is our entire viewport:

每个框都将包含一个位置固定的元素(覆盖)。 该元素实际上将散布在所有页面上，但因为不透明度将被设置为0，所以我们看不到它。当单击一个框时，将使用clip: rect()裁剪内部固定的各个部分元件。 然后，我们将对剪辑进行动画处理，以显示覆盖层的所有宽度和高度，即整个视口：

Clicking on the close button will reverse the effect and the overlay will minimize to the list item’s size and disappear.

单击关闭按钮将使效果相反，并且覆盖层将最小化到列表项的大小并消失。

So, let’s get started with the HTML.

因此，让我们开始使用HTML。

标记 (The Markup)

We’ll use an unordered list for the boxes. Each list item will have an icon class and an optional “span” class that will control the width of the box. Inside we’ll add some text and the overlay division. The overlay will contain a structure that will have a column layout. Since we chose a dummy weather app as our theme, we will be showing a weather forecast for the next seven days. Each of the “day” columns will have some spans which we’ll use for the weekdays, the weather icon and the temperature:

我们将为箱子使用无序列表。 每个列表项都有一个图标类和一个可选的“ span”类，它们将控制框的宽度。 在内部，我们将添加一些文本和叠加分区。 叠加层将包含具有列布局的结构。 由于我们选择了虚拟天气应用程序作为主题，因此我们将显示未来7天的天气预报。 每个“天”列都会有一些跨度，我们将它们用于工作日，天气图标和温度：

<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&g