代码之家 › 专栏 › 技术社区 › SaroGFX

悬停时的SVG抖动动画

svg animation css

SaroGFX · 技术社区 · 7 年前

这就是我试图达到的效果: https://www.w3schools.com/code/tryit.asp?filename=FZ7CQHXPG42J

有一些javascript可以为同一个svg设置动画,但它的目标是一个父div#椭圆,单击汉堡图标时它会从左向右移动。我不知道它怎么会干扰,但我添加它只是为了确保。

我在下面添加了相关代码。有关完整代码,请访问网站。

// Other unrelated(!?) animations on #ellipse //

function moveEllipseRight() {
  ellipse.animate([
    // keyframes
    {
      transform: 'translateX(0px)'
    },
    {
      transform: 'translateX(' + width + 'px)'
    }
  ], {
    // timing options
    duration: 500,
    iterations: 1,
    easing: 'ease-in-out',
    fill: 'forwards'
  });
}

function moveEllipseLeft() {
  ellipse.animate([
    // keyframes
    {
      transform: 'translateX(' + width + 'px)'
    },
    {
      transform: 'translateX(0px)'
    }
  ], {
    // timing options
    duration: 500,
    iterations: 1,
    easing: 'ease-in-out',
    fill: 'forwards'
  });
}

#ellipse {
  position: absolute;
  top: 120px;
  z-index: -99;
  animation: 3s linear 0s slide 1;
  left: -200px;
}

img.shake:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

<div id="ellipse">
  <img src="https://lh5.googleusercontent.com/-yqttzktPkDY/AAAAAAAAAAI/AAAAAAAABGU/z6CVGRmY-C8/photo.jpg?sz=328" alt="ellipse" class="shake" width="400" height="400" />
</div>

1 回复 | 直到 7 年前

Prajwal 7 年前

问题出在你自己身上 #ellipse 风格

#ellipse {
    position: absolute;
    top: 120px;
    z-index: -99; /* remove this, it is not doing anything useful. */ 
    animation: 3s linear 0s slide 1;
    left: -200px;
}

container 因负电荷引起的元素 z-index . 这个负z索引一点用处都没有,除非你打算把文字放在图片上面,我在你的网站上看不到。