扑克牌叠加效果css

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><span class="rb-city">Lisbon</span><span class="icon-clima-1"></span><span>21°C</span></div>
<div><span>Mon</span><span class="icon-clima-1"></span><span>19°C</span></div>
<div><span>Tue</span><span class="icon-clima-2"></span><span>19°C</span></div>
<div><span>Wed</span><span class="icon-clima-2"></span><span>18°C</span></div>
<div><span>Thu</span><span class="icon-clima-2"></span><span>17°C</span></div>
<div><span>Fri</span><span class="icon-clima-1"></span><span>19°C</span></div>
<div><span>Sat</span><span class="icon-clima-1"></span><span>22°C</span></div>
<div><span>Sun</span><span class="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>

Let’s move on to the style.

让我们继续进行样式。

CSS (The CSS)

Note that the CSS will not contain any vendor prefixes, but you will find them in the files.

请注意，CSS将不包含任何供应商前缀，但是您可以在文件中找到它们。

The unordered list will be centered in its parent and we’ll remove the list style:

无序列表将以其父项居中，我们将删除列表样式：

.rb-grid {
list-style: none;
text-align: center;
margin: 0 auto;
}

The list items will have a fluid width and we’ll give them a height of 15em. The will float left:

列表项将具有流体宽度，我们将其高度设置为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;
}

There are three different widths for our grid items, the “default” one with 24% and then the following other two:

网格项目有三种不同的宽度，“默认”宽度为24％，然后是其他两种宽度：

.rb-grid li.rb-span-2 {
width: 49%;
}.rb-grid li.rb-span-4 {
width: 99%;
}

Let’s style the city name headline:

让我们设置城市名称标题的样式：

.rb-grid li h3 {
font-size: 2.6em;
font-weight: 100;
}

We are including a CSS file for the icon font that we are using. It’s the Climacons Font by Adam Whitcroft. You can check out the climacons.css to see which icons we are including. Basically we are using an icon class to add an icon with a pseudo element. In our grid we want them to be positioned absolutely in the lower right corner, appearing a bit cut off:

我们包括一个用于我们使用的图标字体CSS文件。 这是亚当·惠特克洛夫特(Adam Whitcroft)创作的《 Climacons》字体您可以查看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;
}

The temperature will be semi-transparent and we’ll add a transition for its opacity:

温度将是半透明的，我们将为其不透明度添加一个过渡：

.rb-temp {
display: block;
font-size: 2em;
opacity: 0.5;
transition: all 0.3s ease-in-out;
}

When hovering over a list item, we’ll simply increase it:

将鼠标悬停在列表项上时，我们只需增加它：

.rb-grid li:hover .rb-temp {
opacity: 1;
}

Now, let’s take a look at the important overlay division. The final view that we’d like to have is a fullscreen overlay, so we’ll set it’s width and height to 100%. We don’t want it to be relative to anything and we want it to be on top of everything, so let’s give it fixed positioning. Since this would make it appear on top of everything and we’d have overlapping, huge overlays all over, we need to initially set the z-index to -1. This will put them all behind the content of the page. Setting the opacity to 0 will make them invisible:

现在，让我们看一下重要的叠加层划分。 我们想要的最终视图是全屏覆盖，因此我们将其宽度和高度设置为100％。 我们不希望它与任何事物相关，我们希望它在所有事物之上，因此让我们将其固定定位。 由于这会使它显示在所有内容的顶部，并且我们到处都有重叠的巨大覆盖层，因此我们需要首先将z-index设置为-1。 这会将它们全部放在页面内容的后面。 将不透明度设置为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;
}

That’s the initial state of the overlays. Once we click on a list item, we will set the correct rect() values for the clip property and expand the overlay by animating the rect() values.

这是叠加层的初始状态。 单击列表项后，将为clip属性设置正确的rect()值，并通过对rect()值设置动画来扩展覆盖。

But let’s first take a look at the rest of the styling.

但是，让我们先看一下其余样式。

Each overlay will have a little close “button” which will be positioned in the top right corner:

每个叠加层都有一个稍微靠近的“按钮”，位于按钮的右上角：

.rb-close {
position: absolute;
top: 0.4em;
right: 0.4em;
width: 2em;
height: 2em;
text-indent: -9000px;
cursor: pointer;
z-index: 1000;
}.rb-close:before {
content: 'x';
font-weight: 100;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 3em;
line-height: 0.6;
text-align: center;
text-indent: 0px;
}

The wrapper for the columns will have the class rb-week (although we also include the current weather column in it). We need to set it to 100% width and height so that we can define the heights and widths for its children correctly:

列的包装器将具有rb-week类(尽管我们还将当前的天气列包括在其中)。 我们需要将其设置为100％的宽度和高度，以便我们可以正确为其子级定义高度和宽度：

.rb-week {
width: 100%;
height: 100%;
}

The “columns” will have a width of 10% (except the first one, which will have 30%) and they will be floating left:

“列”的宽度为10％(第一个列除外，宽度为30％)，并且它们将向左浮动：

.rb-week > div {
width: 10%;
height: 100%;
float: left;
position: relative;
padding: 3% 0;
}.rb-week > div:first-child {
width: 30%;
}

We have eight columns in total, so 10% times 7 results in 70%, so we have 30% left for the first column.

我们总共有八列，所以10％乘以7将得到70％，因此第一列还有30％。

Each of the spans will have a height of 30% and some padding:

每个跨度的高度为30％，并有一些填充：

.rb-week span {
padding: 5% 0;
font-size: 2em;
font-weight: 100;
display: block;
margin: auto 0;
height: 30%;
width: 100%;
line-height: 0.8;
}

The span for the city name will have a special style, with a thinner font weight:

城市名称的范围将具有特殊的样式，并且字体的粗细也较小：

.rb-week span.rb-city {
font-weight: 700;
padding: 1% 10%;
font-size: 1em;
line-height: 1.2;
}

The icons will have an increased font size and we’ll need to reset the font weight because we’ve changed it in the other rule:

图标的字体大小会增加，我们需要重置字体粗细，因为我们已经在另一条规则中进行了更改：

.rb-week [class^="icon-"]:before {
font-size: 2.5em;
font-weight: normal;
}

The icon in the “current weather column” will be almost transparent:

“当前天气”列中的图标几乎是透明的：

.rb-week > div:first-child [class^="icon-"] {
opacity: 0.1;
}

Now, let’s just go completely nuts and define different background colors for each and every list item box and each column in the overlays.

现在，让我们完全疯了，为每个列表项框以及叠加层中的每一列定义不同的背景颜色。

We have 11 list items:

我们有11个清单项目：

/* Colors *//* Grid */
.rb-grid li:nth-child(1) { background: #3399CC; }
.rb-grid li:nth-child(2) { background: #33CCCC; }
.rb-grid li:nth-child(3) { background: #996699; }
.rb-grid li:nth-child(4) { background: #C24747; }
.rb-grid li:nth-child(5) { background: #e2674a; }
.rb-grid li:nth-child(6) { background: #FFCC66; }
.rb-grid li:nth-child(7) { background: #99CC99; }
.rb-grid li:nth-child(8) { background: #669999; }
.rb-grid li:nth-child(9) { background: #CC6699; }
.rb-grid li:nth-child(10) { background: #339966; }
.rb-grid li:nth-child(11) { background: #666699; }

And for each overlay we have eight columns:

对于每个叠加层，我们有八列：

/* Overlay Columns */
.rb-grid li:nth-child(1) .rb-week > div:nth-child(1) { background: #3399CC; }
.rb-grid li:nth-child(1) .rb-week > div:nth-child(2) { background: #2D87B4; }
.rb-grid li:nth-child(1) .rb-week > div:nth-child(3) { background: #297AA3; }
.rb-grid li:nth-child(1) .rb-week > div:nth-child(4) { background: #256E93; }
.rb-grid li:nth-child(1) .rb-week > div:nth-child(5) { background: #216283; }
.rb-grid li:nth-child(1) .rb-week > div:nth-child(6) { background: #1D5672; }
.rb-grid li:nth-child(1) .rb-week > div:nth-child(7) { background: #184962; }
.rb-grid li:nth-child(1) .rb-week > div:nth-child(8) { background: #143D52; }.rb-grid li:nth-child(2) .rb-week > div:nth-child(1) { background: #33CCCC; }
.rb-grid li:nth-child(2) .rb-week > div:nth-child(2) { background: #2DB4B4; }
.rb-grid li:nth-child(2) .rb-week > div:nth-child(3) { background: #29A3A3; }
.rb-grid li:nth-child(2) .rb-week > div:nth-child(4) { background: #259393; }
.rb-grid li:nth-child(2) .rb-week > div:nth-child(5) { background: #218383; }
.rb-grid li:nth-child(2) .rb-week > div:nth-child(6) { background: #1D7272; }
.rb-grid li:nth-child(2) .rb-week > div:nth-child(7) { background: #186262; }
.rb-grid li:nth-child(2) .rb-week > div:nth-child(8) { background: #145252; }/* ... */

…and so on for each of the 11 boxes.

…依次类推11个盒子中的每个盒子。

Last but not least, let’s take care of smaller screens with a media query. When the space is limited, we don’t want to show boxes in the grid anymore:

最后但并非最不重要的一点是，让我们通过媒体查询来处理较小的屏幕。 当空间有限时，我们不再希望在网格中显示框：

@media screen and (max-width: 63.125em) {
.rb-grid li,
.rb-grid li.rb-span-2,
.rb-grid li.rb-span-4 {
width: 100%;
height: 10em;
text-align: left;
}.rb-grid li[class^="icon-"]:before,
.rb-grid li[class*=" icon-"]:before {
font-size: 6em;
left: auto;
right: 0;
line-height: 2.5;
}.rb-grid li > div {
text-align: center;
}
}

The overlay columns and the text inside will be taken care of with the FitText plugin so we won’t have to change the layout drastically.

FitText插件将处理覆盖列和其中的文本，因此我们无需大幅度更改布局。

Now, let’s take a look at some important parts of the JavaScript.

现在，让我们看一下JavaScript的一些重要部分。

JavaScript (The JavaScript)

Let’s start by caching some elements and initialize some variables:

让我们开始缓存一些元素并初始化一些变量：

var $items = $( '#rb-grid > li' ),
transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd',
'msTransition' : 'MSTransitionEnd',
'transition' : 'transitionend'
},// transition end event name
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],// window and body elements
$window = $( window ),
$body = $( 'BODY' ),// transitions support
supportTransitions = Modernizr.csstransitions,// current item's index
current = -1,// window width and height
winsize = getWindowSize();

First, we will apply the FitText jQuery plugin to the column text elements in the overlay in order to scale down the text for smaller screens. We’ll then bind the click events to the items and the close buttons (per item).

首先，我们将FitText jQuery插件应用于叠加层中的列文本元素，以缩小文本以适应较小的屏幕。 然后，我们将click事件绑定到项目和关闭按钮(每个项目)。

Also, we need to get the current values for the window’s width and height, so we’ll bind the resize event to the window element.

另外，我们需要获取窗口的宽度和高度的当前值，因此我们将resize事件绑定到window元素。

function init( options ) {
// apply fittext plugin
$items.find( 'div.rb-week > div span' ).fitText( 0.3 ).end().find( 'span.rb-city' ).fitText( 0.5 );
initEvents();
}

When we click on one item, two transitions are going to be applied to the respective overlay element. The first one will apply a clip that will crop it in the exact same place of the current list item. We’ll also show the overlay by increasing its opacity. The second one will take care of animating the clip so that the overlay “expands” to fit the window’s width and height. For the first transition the values needed are respective to the item’s position and dimensions. We get those by calling the “getItemLayoutProp” function. For the second one we just need the window’s width and height to define the right clip value.

当我们单击一项时，两个过渡将应用于各自的叠加元素。 第一个将应用剪辑，将其裁剪到与当前列表项完全相同的位置。 我们还将通过增加其不透明度来显示叠加层。 第二个将为剪辑设置动画，以使覆盖层“扩展”以适合窗口的宽度和高度。 对于第一个转换，所需的值分别对应于商品的位置和尺寸。 我们通过调用“ getItemLayoutProp”函数得到这些。 对于第二个，我们只需要窗口的宽度和高度来定义正确的剪辑值。

Two things also need to be considered here in order for this to work properly. First, we are “showing and hiding” the page scroll between states because we don’t want to be able to scroll once the final state (expanded overlay) is reached. Second, we are setting the overlay’s z-index to a high value so it stays on “top” and the pointer-events to auto so that the overlay content is clickable. If transitions are not supported we are basically skipping the first state and the overlay will be expanded immediately when the item is clicked.

为了使其正常工作，这里还需要考虑两件事。 首先，我们“显示和隐藏”页面在状态之间的滚动，因为我们不希望一旦到达最终状态(扩展的覆盖层)就可以滚动。 其次，我们将叠加层的z-index设置为较高的值，以使其停留在“顶部”，并且将指针事件设置为auto，以使叠加层内容可单击。 如果不支持转换，则我们基本上会跳过第一个状态，单击该项目时，覆盖层将立即展开。

function initEvents() {
$items.each( function() {var $item = $( this ),
$close = $item.find( 'span.rb-close' ),
$overlay = $item.children( 'div.rb-overlay' );$item.on( 'click', function() {if( $item.data( 'isExpanded' ) ) {
return false;
}
$item.data( 'isExpanded', true );
// save current index of the item
current = $item.index();var layoutProp = getItemLayoutProp( $item ),
clipPropFirst = 'rect(' + layoutProp.top + 'px ' + ( layoutProp.left + layoutProp.width ) + 'px ' + ( layoutProp.top + layoutProp.height ) + 'px ' + layoutProp.left + 'px)',
clipPropLast = 'rect(0px ' + winsize.width + 'px ' + winsize.height + 'px 0px)';$overlay.css( {
clip : supportTransitions ? clipPropFirst : clipPropLast,
opacity : 1,
zIndex: 9999,
pointerEvents : 'auto'
} );if( supportTransitions ) {
$overlay.on( transEndEventName, function() {$overlay.off( transEndEventName );setTimeout( function() {
$overlay.css( 'clip', clipPropLast ).on( transEndEventName, function() {
$overlay.off( transEndEventName );
$body.css( 'overflow-y', 'hidden' );
} );
}, 25 );} );
}
else {
$body.css( 'overflow-y', 'hidden' );
}} );...} );...}function getItemLayoutProp( $item ) {
var scrollT = $window.scrollTop(),
scrollL = $window.scrollLeft(),
itemOffset = $item.offset();return {
left : itemOffset.left - scrollL,
top : itemOffset.top - scrollT,
width : $item.outerWidth(),
height : $item.outerHeight()
};}

As for the click event for the close element, we are basically reverting what was done before:

至于close元素的click事件，我们基本上是在恢复之前的操作：

function initEvents() {
$items.each( function() {...$close.on( 'click', function() {$body.css( 'overflow-y', 'auto' );var layoutProp = getItemLayoutProp( $item ),
clipPropFirst = 'rect(' + layoutProp.top + 'px ' + ( layoutProp.left + layoutProp.width ) + 'px ' + ( layoutProp.top + layoutProp.height ) + 'px ' + layoutProp.left + 'px)',
clipPropLast = 'auto';// reset current
current = -1;$overlay.css( {
clip : supportTransitions ? clipPropFirst : clipPropLast,
opacity : supportTransitions ? 1 : 0,
pointerEvents : 'none'
} );if( supportTransitions ) {
$overlay.on( transEndEventName, function() {$overlay.off( transEndEventName );
setTimeout( function() {
$overlay.css( 'opacity', 0 ).on( transEndEventName, function() {
$overlay.off( transEndEventName ).css( { clip : clipPropLast, zIndex: -1 } );
$item.data( 'isExpanded', false );
} );
}, 25 );} );
}
else {
$overlay.css( 'z-index', -1 );
$item.data( 'isExpanded', false );
}return false;} );} );...}

And that’s it! I hope you enjoyed this tutorial and find it useful!

就是这样！ 我希望您喜欢本教程并发现它有用！

Also check out demo 2 which has an additional fancy effect for revealing the overlay. The rotation effect is done using a simple transition; it’s a great example of how simple it is add you own unique effect.

另外，请查看演示2 ，该演示还有一个额外的效果，可以显示叠加层。 旋转效果是通过简单的过渡完成的； 这是一个简单的例子，它可以为您带来独特的效果。

翻译自: https://tympanus.net/codrops/2013/01/17/putting-css-clip-to-work-expanding-overlay-effect/

扑克牌叠加效果css