Question

我发现这篇文章Animate like button when click on it，但我想知道如何设置动画的文本方面。

我试过了：

SELECT * FROM items WHERE udf.GetItemsWithMatchingCategories(items.Categories, "drink")

＆安培;＆安培;

<div class="heart">TEXT</div>

但文字来自动画...... 我只想要动画右侧的文字。怎么做到这个？

Answer 1

以下是您尝试做的小提琴的更新片段。

Cookbook

$(".heart").on('click touchstart', function(){
  $(this).toggleClass('animating');
});


$(".heart").on('animationend', function(){
  $(this).toggleClass('animating');
});

.heart {
  float:left;
  margin-top: -1em;
  cursor: pointer;
  height: 50px;
  width: 50px;
  background-image:url(  'https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png');
  background-position: left;
  background-repeat:no-repeat;
  background-size:2900%;
 }

 .heart:hover {
  background-position:right;
 }

 .animating {
  animation: heart-burst .8s steps(28) 1;
 }

 @keyframes heart-burst {
 from {background-position:left;}
 to { background-position:righ;}
 }

Answer 2

你可以使用2个div。一个用于心脏，一个用于文本。然后在css中使用position：relative或position：absolute来使用alignmente。

也许你还需要玩z-index，这样才能确保心脏在后面。

在这个例子中，我的心脏只是一个正方形。原则是一样的。

<div class="heart-container">
  <div class="heart"></div>
  <p>TEXT</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

.heart {
  border: 1px solid black;
  width: 50px;
  height: 50px;
}
.text {
  position: absolute;
  left: 20px;
  top: 25px;
}

将文本放在jquery动画的一侧

2 个答案: