三角动画显露的图像（包括三角旋转+规模变化+图像转换）

Question

背景：

嘿，伙计们，所以我开始学习HTML，CSS &的Javascript自上周五以来，因为我受朋友之托来创建一个网站他。我已经有了另一种语言的先前知识，并且在遥远的过去曾经改变过，但现在我才认真对待它。我需要帮助的是创建一个动画来显示一个图像，这将链接一个视频灯箱。我已经设置了灯箱并且创建了图像转换（图像转换本质上是一个灰度图像，转变为悬停时的彩色对象，用CSS完成），但我不确定如何执行我选择的三角形动画。

动画描述：

这将基本上是一个“窗口”，以实际图像，它将开始反转（与顶部第五部分三角形闭合当然）和当在悬停放大+ 180度旋转图像从灰度转变为彩色。我尝试使用“前景”图像的.png并旋转+缩放它，但是它覆盖了图像上方的一些选项，它在旋转时看起来很尴尬，加上我无法使用CSS过渡效果（ CSS转换是平滑的，而javascript命令$（this）.attr（'src'，'linkofnewimage'）;是突然的。）。如果有人伸出援手，我会非常感激，我想过使用Canvas并知道命令创建一个三角形，但我不确定这将如何实现上述效果。

TL; DR

的三角形作为一个窗口的实际图像，这将动画规模&转动。

/TL; DR

我已关联的图像展示期望的效果，下面的HTML，CSS和.js代码：

图像链接：Actual Image，Pre-Animation from User Viewpoint和我不能发布的发布从用户观点 - 动画虽然其在同一网站上oGfaa5m.jpg

HTML代码：

<p> 
<a href="https://www.youtube.com/watch?v=kmcDmkXLE0E" data-lity> 
<div id="video"> 
<img src="Colored.png" alt="Placeholder"> 
<img src="Grayscale.png" alt="Placeholder"> 
</div> 
</a> 
</p> 

CSS代码：

#video { 
    position: relative; 
    height: 300px; 
    Width: 903px; 
    margin: 0 auto; 
} 
#video img { 
    position:absolute; 
    left:0; 
    height: 300px; 
    Width: 903px; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 
#video img:hover { 
    opacity:0; 
} 
p { 
    text-align: center; 
} 

的Javascript：

None relevant to the above effect 

Answer 1

有可能是使用CSS的方式，奇数边界，在具有较高的Z-DOM元素假三角 “洞”索引比你的底层图片。

或者你可以使用一个静态图像文件，它是一个带alpha中心三角形的大方形，并且只是缩放和旋转它。

还是最纯粹的呈现方式是只使用合成在HTML5画布：

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing

你会做这样的事情：

var canvas=document.getElementById("canvas"); 
var ctx=canvas.getContext("2d"); 
var triangle = new Image(); 
triangle.src = "triangle.png"; 
ctx.drawImage(triangle, x, y); 
ctx.globalCompositeOperation="source-in"; 
var tree = new Image(); 
tree.src = "tree.png" 
ctx.drawImage(tree, x, y);