使用带有缩放透明元素的jQuery突出显示元素

Question

我试图仅使用jQuery / plugins为任何元素创建以下效果：

特别是它应该使用变换而不是宽度和高度动画，并且可以在任何DOM元素上使用。

是否有可用于jQuery的插件可以实现此效果？它应该很简单：使用clone（）复制dom对象，将克隆重新定位在原始对象上，然后在新元素上设置缩放变换和不透明度的动画。但是，我怀疑它不是那么简单。

有什么想法吗？

Answer 1

你不需要jQuery来完成那个动画。您可以使用CSS3动画和变换属性。看看我创建的以下示例：

http://jsbin.com/purik/1/

HTML：

<div class="logos">
    <div class="logo"></div>
    <div class="logo animated"></div>
</div>

CSS：

.logos {
  position: relative;
}
.logo {
  width: 100px;
  height: 70px;
  background: #CC0000 url(http://www.w3schools.com/images/w3logo.png) 50% 50% no-repeat;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.logo.animated {
  position: absolute;
  left: 0;
  top: 0;
  animation: scale-fadeout 2s infinite;
  -webkit-animation: scale-fadeout 2s infinite;
}

@keyframes scale-fadeout {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  5% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}
@-webkit-keyframes scale-fadeout {
  0% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
  5% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.35);
  }
}

Answer 2

如果父元素为position: relative，且元素本身为position: absolute，则此方法有效。

克隆元素，然后对其进行动画处理以更改大小，更改left和top以及集opacity: 0的值。

小提琴：http://jsfiddle.net/Ej38P/1/