css淡入淡出动画效果_CSS3动画图像库：淡入淡出和幻灯片效果

css淡入淡出动画效果

The image galleries we are about to explore descend from, and share code with, the earliest, simple, CSS gallery I introduced in this blog: a div with position: relative applied, and absolute positioning applied to images inside it. Both examples – a cross-fade and slideshow effect – use the same basic markup. In a compatible browser, mouseover each image to see an example of the associated effect. The markup for both examples is exactly the same:

我们将要探索的图像库是我在此博客中介绍的最早，简单CSS画廊的源代码，并与它们共享代码：具有div的div position: relative ，并且absolute定位应用于其中的图像。 这两个示例(交叉淡入淡出和幻灯片效果)都使用相同的基本标记。 在兼容的浏览器中，将鼠标悬停在每个图像上可以查看相关效果的示例。 这两个示例的标记完全相同：

<div id="gallery">
	<img src="wooly-sunbonnet.jpg" alt="Wooly Sunbonnet">
	<img src="nettleleaf-sage.jpg" alt="Nettleleaf Sage">
</div>

… it is only the CSS that changes between them. Note that for both examples to work, the images must be of the exact same size. It is probably easiest to crop the images to the same dimension using PhotoShop before applying the techniques you see here.

……只是CSS在它们之间发生了变化。 请注意，要使两个示例都能正常工作，图像的大小必须完全相同。 在应用您在此处看到的技术之前，使用PhotoShop将图像裁剪为相同尺寸可能是最容易的。

CSS淡入淡出图库 (CSS Cross-fade Gallery)

The applied CSS, sans vendor prefixes:

应用CSS， 没有 供应商前缀 ：

div#gallery {
	position: relative;
}
div#gallery img {
	width: 400px; height: 400px;
	position: absolute;
	left: 0;
	transition: all 2s ease-in-out;
}
div#gallery img:hover {
	opacity: 0;
}

Very simply, the position: relative declaration makes the div the baseline origin of any elements with position: absolute set inside it. With the second image stacked upon the first, the :hover and applied transition works to cross-fade the images.

很简单， position: relative声明使div成为其中position: absolute的任何元素的基线原点。 在第二个图像堆叠在第一个图像上的情况下， :hover和应用的transition可以使图像淡入淡出。

CSS幻灯片库 (CSS Slideshow Gallery)

The slideshow is similar, and again uses images of the same size. The containing <div> now has a set height and width, with any overflow hidden:

幻灯片显示类似，并且再次使用相同大小的图像。 现在，包含的<div>具有设置的height和width ，并且隐藏了所有overflow ：

div#gallery, div#gallery img {
	width: 400px;
	height: 400px;
	overflow: hidden;
	float: left;
}
div#gallery img {
	transition: all 2s linear;
}
div#gallery img:hover,
	div#gallery img:hover + img {
		transform: translate(0, -400px);
}

The CSS is relatively straightforward: the containing <div> and images inside have the same qualities, so their base styles may be grouped under the first style declaration: float applied to the images removes any trace of a gap between them. Hovering over the first image moves it up 400 pixels (the height of the image) while the paired adjacent selector ensures that the next image moves in the same way, at the same time.

CSS是相对简单的：内部包含的<div>和图像具有相同的质量，因此可以在第一个样式声明下对它们的基本样式进行分组：将float应用于图像可以消除它们之间的任何痕迹。 将鼠标悬停在第一张图像上可将其向上移动400个像素(图像的高度)，而配对的相邻选择器可确保下一幅图像同时以相同的方式移动。

Note that both techniques shown here only work on pairs of images: useful for “before and after” comparisons or as an animated alternative to image swaps and CSS sprites. Transitioning a sequence of images greater than two requires using more advanced code to create a CSS slider.

请注意，此处显示的两种技术仅适用于成对的图像：用于“前后”比较，或作为图像交换和CSS精灵的动画替代。 要转换大于两个的图像序列，需要使用更高级的代码来创建CSS滑块 。

翻译自: https://thenewcode.com/288/CSS3-Animated-Image-Galleries-Cross-fade-and-Slideshow-Effects

css淡入淡出动画效果