css3悬停放大_如何使用CSS3创建快速悬停幻灯片放映

css3悬停放大

View demo 查看演示 Download Source 下载源

Today I want to share a little hover slideshow with you. The main idea is to run a super-fast image slideshow on hover and show the current image when mousing out. It’s just a fancy effect to play with and I got the idea from Contain.r. We’ll be using CSS animations for the slideshow and control the pausing and running with animation-play-state.

今天，我想与您分享一个小悬停幻灯片。 主要思想是在悬停时运行超快图像幻灯片，并在鼠标悬停时显示当前图像。 只是一个幻想效果，我从Contain.r中得到了这个主意。 我们将在幻灯片演示中使用CSS动画，并通过animation-play-state控制暂停和运行。

Please note: this is just experimental and will only work as intended in browsers that support the respective CSS properties. 请注意：这只是实验性的，仅在支持各自CSS属性的浏览器中可以正常使用。

This is our simple structure:

这是我们的简单结构：

<div class="hs-wrapper">

	<img src="images/1.jpg" alt="image01"/>
	<img src="images/2.jpg" alt="image02"/>
	<img src="images/3.jpg" alt="image03"/>
	<img src="images/4.jpg" alt="image04"/>
	<img src="images/5.jpg" alt="image05"/>
	<img src="images/6.jpg" alt="image06"/>
	<img src="images/7.jpg" alt="image07"/>
	<img src="images/8.jpg" alt="image08"/>
	
	<div class="hs-overlay">
		<span>Summer <strong>2012</strong></span>
	</div>
	
</div>

We’ll show and hide the images using an animation:

我们将使用动画显示和隐藏图像：

.hs-wrapper img{
	top: 0px;
	left: 0px;
	position: absolute;
	animation: showMe 0.8s linear infinite 0s forwards;
	animation-play-state: paused;	
}

The animation will be paused and we’ll just run it on hover:

动画将被暂停，我们将在悬停时运行它：

.hs-wrapper:hover img{
	animation-play-state: running;
}

The animation will simply make an image visible and put it on top of the “stack”:

动画将简单地使图像可见并将其放置在“堆栈”顶部：

@keyframes showMe {
    0% { visibility: visible; z-index: 100; }
	12.5% { visibility: visible; z-index: 100; }
	25% { visibility: hidden; z-index: 0; }
    100% { visibility: hidden; z-index: 0; }
}

As you can see, each image will have the same animation but we will start the animation for each image with a delay. We also want to reverse the stacking order of the images by setting the z-index accordingly. Since we will run the whole animation for 0.8 seconds, we’ll delay the start for each image with 0.1 second (except the first one):

如您所见，每个图像将具有相同的动画，但是我们将延迟每个图像开始动画。 我们还希望通过相应地设置z-index来反转图像的堆叠顺序。 因为我们将整个动画运行0.8秒，所以我们将每个图像的开始延迟0.1秒(第一个图像除外)：

.hs-wrapper img:nth-child(1){
	z-index: 9;
}
.hs-wrapper img:nth-child(2){
	animation-delay: 0.1s;
	z-index: 8;
}
.hs-wrapper img:nth-child(3){
	animation-delay: 0.2s;
	z-index: 7;
}
.hs-wrapper img:nth-child(4){
	animation-delay: 0.3s;
	z-index: 6;
}

The percentages of the animation are calculated as follows: take the 100% of the animation timespan and distribute 8 images over it. Each one runs 0.1 seconds which means that at 12.5% we want the second image to show. The second image that will show, will be on top of the current one (although they have the same z-index) because it follows in the HTML structure. Having tried some other possibilities (i.e. not messing around with the z-index, setting 12.6% as the next step, etc.) it seems that this variant performs the smoothest. Nonetheless, sometimes there seems to be a bit of a lag.

动画的百分比计算如下：取动画时间跨度的100％，并在其中分配8张图像。 每个图像运行0.1秒，这意味着我们希望第二张图像以12.5％的速度显示。 将显示的第二个图像将位于当前图像的顶部(尽管它们具有相同的z索引)，因为它遵循HTML结构。 尝试了其他一些可能性(即不要弄乱z-index，将12.6％设置为下一步等)之后，该变体的效果似乎最平稳。 但是，有时似乎有些滞后。

The overlay, which will be shown on hover, will have an absolute position and since we want to fade it in and animate the box shadow, we’ll add a transition to it:

叠加层(将在悬停时显示)将具有绝对位置，并且由于我们希望淡入并为框阴影设置动画，因此我们将向其添加过渡效果：

.hs-overlay{
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 500;
	background: rgba(0,0,0,0.6);
	box-shadow: 0 0 0 0 rgba(255,255,255,0.3) inset;
	pointer-events: none;
	transition: all 0.3s linear;
}

On hover, when the slideshow starts running, we’ll show the overlay:

悬停时，当幻灯片开始运行时，我们将显示叠加层：

.hs-wrapper:hover .hs-overlay{
	opacity: 1;
	box-shadow: 0 0 0 5px rgba(255,255,255,0.3) inset;
}

You can increase the opacity level of the background color of the overlay in order to make the effect more subtle. Note, that the images have the same background which makes this effect less seizure-inducing than if you would use a different color for each one. Black and white images with a not too transparent overlay like in Contain.r are a good fit for this effect.

您可以增加覆盖层背景颜色的不透明度级别，以使效果更微妙。 请注意，与为每个图像使用不同的颜色相比，这些图像具有相同的背景，因此这种效果更不会引起癫痫发作。 黑白图像(如Contain.r)中的叠加层不太透明，非常适合此效果。

It’s as well important to note that it should be made sure that the images are of course loaded and apply something similar to what Chris Coyier suggests here.

同样重要的是要注意，应该确保图像当然已加载，并应用类似于Chris Coyier在此处建议的内容。

And that’s it! I hope you find it inspiring.

就是这样！ 希望您能从中得到启发。

翻译自: https://tympanus.net/codrops/2012/05/09/how-to-create-a-fast-hover-slideshow-with-css3/

css3悬停放大