Question

此处示例：

$(function(){
        var x = 0;
        setInterval(function(){
            x-=1;
            $(".link-wavy:hover").css('background-position', x + 'px 100%');
        }, 20);
    })

body {
  font-family: 'Source Sans Pro', sans-serif;
  color: #000;
  font-size: 1em;
  line-height: 1.6em;
  font-weight: 400;
}

a {
  text-decoration: none;
}

.link-contact {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  color: #000;
}

.link-wavy {
  padding-bottom: 9px;
  background-image: url("http://uploads.webflow.com/56d8a8f1100bc1bb7928eebd/5831d10096c13a1f491ac02d_wavy-k.png");
  background-position: -50px 100%;
  background-size: 230px;
  background-repeat: repeat-x;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="link-contact w-inline-block" href="http://google.com">
    <div class="link-wavy">wavvvvvvy baby</div>
  </a>

这是正确的想法..在悬停时连续移动背景图像，以便波动。

但是我对jQuery并不十分精通，我希望它能够更加精致......

理想情况下，正弦波运动在悬停时会有一些轻松的进出，并且在“悬停”时停止的“开始”（因此悬停时没有跳转复位到原始位置）。

非常感谢任何想法。谢谢！

Answer 1

有关信息，动画CSS很适合：

例如

＆＃13;

.link-wavy {
  animation: wavit 2s linear infinite;
  animation-play-state: paused;
}
.link-wavy:hover {
  animation-play-state: running;
}
@keyframes wavit {
  to {
    background-position: 100% 100%;
  }
}


body {
  font-family: 'Source Sans Pro', sans-serif;
  color: #000;
  font-size: 1em;
  line-height: 1.6em;
  font-weight: 400;
  min-height: 100vh;
  width: 100%;
}

/* added some flex instead absolute + transform */
html,
body {
  display: flex;/* to center demo */
}
.link-contact {
  margin: auto;/* flex item centers itself */
  color: #000;
}
a {
  text-decoration: none;
}
.link-wavy {
  padding-bottom: 9px;
  background-image: url("http://uploads.webflow.com/56d8a8f1100bc1bb7928eebd/5831d10096c13a1f491ac02d_wavy-k.png");
  background-position: 0 100%;
  background-size: 230px;
  background-repeat: repeat-x;
}

＆＃13;

<a class="link-contact w-inline-block" href="http://google.com">
  <div class="link-wavy">wavvvvvvy baby</div>
</a>

＆＃13;

尝试使用CSS / jQuery平滑/连续地为悬停的正弦波链接设置动画

1 个答案: