从该图像的中心生长的图像上的圆形面具

点击某个按钮,我需要显示黑胶唱片的图像。图像将出现在按钮旁边的某个位置,并且是透明的png,使其看起来更圆。 问题是需要使用从图像中心的点设置动画的圆形遮罩显示并展开以显示整个“记录”。如何创建一个圆角动画蒙版,在不缩放/重新缩放图像的情况下显示“记录”图像。 有没有人知道一个JavaScript或最好的jQuery库能够像这样的东西? 如果你用不同的语言知道这样的事情,它可能会帮助我写一些我自己的东西。 谢谢。     
已邀请:
也许你可以创建一个大的白色(或背景色)PNG,中间有一个alpha透明孔。将其放在要显示的图像的顶部,然后将其放大,同时将其固定在其中心点。一旦缩放到整个底层图像在透明孔内的点,移除覆盖图像。 我不知道这会如何表现(可能很糟糕!),但这是一个想法。     
HTML通常以矩形形式出现,如果你有一个透明的图像,那么你可以缩放它,保持它的中心不变。 如果您只需要在圆圈内选择它,那么您需要检查鼠标坐标是否有单击操作,以查看它是否在圆圈内,在其包含的矩形内。请参阅:如何使悬停触发器仅在具有半径边界与jquery的div中的圆形区域上触发动画 @ 6bytes建议使用圆角。 Chrome和FireFox目前通过
border-radius
-moz-border-radius
CSS属性环绕圆角,因此您可以通过
50%
边框半径实现视觉圆。但是,这只是底层矩形的视觉差异,矩形内的点击仍然计入圆圈本身。
#circle {
    -moz-border-radius: 50%;
    border-radius: 50%;
}
基本矩形演示:http://jsfiddle.net/rL4BU/2/ 您可以输入一些代码来检查圈内是否有点击以解决此问题。 Circle Clicks Demo:http://jsfiddle.net/rL4BU/4/     

要回复问题请先登录注册