img-polaroid_用CSS过渡制作宝丽来照片

img-polaroid

I’ve talked about animating filters previously, but they are not always the most appropriate way to create image transitions. For some effects – such as replicating the development process of a Polaroid photograph –  you might need to think a little out of the box.

我谈到动画过滤器 之前 ，但他们并不总是产生图像转换最合适的方式。 对于某些效果(例如复制宝丽来照片的显影过程)，您可能需要开箱即用。

We don’t want this effect altering the outside edge of the picture, which would happen if we simply added a borde to the image. Instead we’ll create a frame with a div:

我们不希望这种效果会改变图片的外部边缘，而如果我们只是在图片上添加边框，就会发生这种情况。 相反，我们将使用div创建一个框架：

<div id="polaroid"></div>

This element will have a background image placed inside it, with the container scaled to fit it, and a broad inset shadow with a large spread value applied together with a sepia filter:

此元素将在其中放置背景图像，并缩放容器使其适合它，并使用棕褐色滤镜应用带有较大散布值的宽插入阴影 ：

div#polaroid {
	margin: 0 auto;
	border: 25px solid #e3e4d3;
	border-bottom-width: 50px;
	transition: 3s box-shadow ease-in;
	box-shadow: 0 0 200px 200px rgba(29, 25, 4, 1) inset, 
		0 0 3px 6px rgba(0, 0, 0, 0.07);
	width: 50%;
	padding-top: 50%;
	background-image: url(christine-adams.jpg);
	background-size: cover;
 	filter: sepia(50%);
}

The secondary outer shadow seperates the photograph from its background. On however, we’ll change the div’s box-shadow and lighten the filter:

次要外部阴影将照片与背景分开。 但是，我们将更改div的box-shadow并减轻滤镜的亮度：

div#polaroid:hover {
	box-shadow: 0 0 100px 0 rgba(29, 25, 4, 0.8) inset,
		0 0 3px 6px rgba(0, 0, 0, 0.07);
	filter: sepia(20%);
}

It’s very possible to develop the image after shaking it on the screen, but that will need JavaScript and a future article.

在屏幕上摇动图像后，很有可能会对其进行显影，但这需要JavaScript和以后的文章。

翻译自: https://thenewcode.com/548/Develop-A-Polaroid-Photograph-With-CSS-Transitions

img-polaroid