as3.0 图像混合模式_带有背景混合模式的动画图像更改

as3.0 图像混合模式

Opportunities to animate background properties are limited, but previous articles here have shown that it is possible to transition background-blend-mode with a little thought and cleverness. There’s at least one more possibility, shown above.

动画背景属性的机会是有限的，但是此处的先前文章表明，只需稍加思考和聪明就可以转换background-blend-mode 。 如上所示，至少还有一种可能性。

This example might be thought of as a blend of my “Hover Effect on Images From Different Directions” article and the previous background-blend-mode animation example, by way of an odd series of connections (Nikolay Talanov’s variation of Lea Verou’s take on my first before-and-after image comparator).

该示例可能被认为是我的“悬停效果从不同方向对图像的影响”一文和先前的background-blend-mode动画示例background-blend-mode ，通过一系列奇怪的联系( Nikolay Talanov对Lea Verou 所做的变体对我的看法 首先是前后图像比较器 )。

The code uses a single <div> element, and some CSS:

该代码使用单个<div>元素和一些CSS：

div {
	max-width: 1200px;
	background: url(smoke-boy.jpg),
		linear-gradient(#00f,#f00);
	background-size: contain, 100% 100%;
	padding-top: 66.66%;
	background-position: 0 0, -1200px 0px;
	background-repeat: no-repeat;
	background-blend-mode: luminosity;
	transition: 3s background-position linear;
	margin: 0 auto;
}
div:hover { 
	background-position: 0 0, 0 0;
}

The <div> element needs padding due to the fact that it doesn’t actually have any content; the blue-to-red gradient is moved completely outside the area of the container and moved back in on hover.

由于<div>元素实际上没有任何内容，因此需要填充。 蓝色到红色渐变完全移到了容器区域之外，并在悬停时移回了内部。

翻译自: https://thenewcode.com/960/Animated-Image-Changes-with-background-blend-mode

as3.0 图像混合模式