// HTML代码
<i class="icon-heart"></i>
// CSS代码
.icon-heart {
display: inline-block;
width: 30px;
height: 30px;
background-image: url(./icon.png);
background-position: 0 0;
transition: background-position .3s;
}
.icon-heart:hover {
background-position: -30px 0;
}代码中，大家定义了一个标签，同时给它赋予了class=”icon-heart”的样式属性。接着，大家通过CSS属性background-image来指定图标的背景图片，而background-position则是来控制图标在父元素中显示的位置坐标。
当鼠标悬停在图标上时，大家使用:hover伪类，让图标的background-position向左移动30个像素。而transition属性则是用来定义CSS过渡动画效果的。在这里，大家设置了background-position属性的transition为0.3秒，表示每次鼠标悬停时，图标的位置都将缓慢移动。
通过以上代码，大家可以很方便地实现一个简单的图标动画效果。同时，大家还可以根据需求自定义更复杂的图标动画。CSS的图标动画效果既简单又有趣，值得大家去学习和尝试！