我看到了 Twitter Favorite 动画的示例，并在我的设计中用于测试，现在我遇到了图标对齐问题，我不知道如何解决？谁能给我解释一下吗？
下面是实际代码的使用，我需要所有带有文本的图标都在一列中，类似于 Twitter 图标，但非常基本。
/* when a user clicks, toggle the 'is-animating' class */
$(".heart").on('click touchstart', function(){
$(this).toggleClass('is_animating');
});
/*when the animation is over, remove the class*/
$(".heart").on('animationend', function(){
$(this).toggleClass('is_animating');
});.postfooter {
display: flex;
justify-content: flex-start;
color: #b3b3b3;
margin-top: 30px;
font-size: 25px;
}
.postfooter .fa {
margin-left: 40px;
}
.heart {
cursor: pointer;
height: 70px;
width: 70px;
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;
}
.is_animating {
animation: heart-burst .8s steps(28) 1;
}
@keyframes heart-burst {
from {background-position:left;}
to { background-position:right;}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<!-- Font-Awesome CDN -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<div class="postfooter">
<div><i class="fa fa-reply" aria-hidden="true"> 2</i></div>
<div><i class="fa fa-retweet" aria-hidden="true"> 30</i></div>
<div><div class="heart"></div> 16</div>
</div>
</body>
</html>最佳答案
您的元素未对齐的原因是因为包含心形动画的 div 元素是 block 级元素(相对于带有超棒字体图标的 i 元素，它们是内联的)。
要修复该部分，您只需将 display: inline-block 添加到心脏元素。 heart 元素的高度也是 70px，因此要对齐其他元素，您还需要添加 height: 70px 和 line-height: 70px；到您的页脚。最后，为了调整心脏元素比其他元素宽得多的事实，您可以将心脏计数包裹在一个跨度中并给它一个负边距。
/* when a user clicks, toggle the 'is-animating' class */
$(".heart").on('click touchstart', function(){
$(this).toggleClass('is_animating');
});
/*when the animation is over, remove the class*/
$(".heart").on('animationend', function(){
$(this).toggleClass('is_animating');
});.postfooter {
display: flex;
justify-content: flex-start;
color: #b3b3b3;
margin-top: 30px;
font-size: 25px;
height: 70px;
line-height: 70px;
}
.postfooter .fa {
margin-left: 40px;
}
.heart {
display: inline-block;
cursor: pointer;
height: 70px;
width: 70px;
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-text {
margin-left: -20px;
}
.heart:hover {
background-position:right;
}
.is_animating {
animation: heart-burst .8s steps(28) 1;
}
@keyframes heart-burst {
from {background-position:left;}
to { background-position:right;}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<!-- Font-Awesome CDN -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<div class="postfooter">
<div><i class="fa fa-reply" aria-hidden="true"> 2</i></div>
<div><i class="fa fa-retweet" aria-hidden="true"> 30</i></div>
<div class="heart"></div><span class="heart-text">16</span>
</div>
</body>
</html>关于css - 使用推特时的 Div 对齐最喜欢的动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49116776/