css拇指点赞动画效果 |css调整背景图片位置

.thumb {
height: 50px;
width: 50px;
background-image: url('thumbs.png');
background-size: cover;
display: inline-block;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.thumb.active {
transform: scale(1.5);
}
.thumb.clicked {
transform: translateY(-100px) rotate(45deg);
opacity: 0;
}

首先，大家需要创建一个带有背景图片的HTML元素，这里大家使用拇指的图片。然后，大家在CSS中定义这个元素的高度、宽度和背景尺寸。接着，大家使用”display: inline-block”将其设置为行内块元素，并且令其具有指针样式。

下一步，大家为拇指添加一个过渡效果，当鼠标移到这个元素上方时，可以看到拇指的大小缓慢增长。

接着，大家为其增加一个.active类，当大家点击此拇指的时候，这个类就会触发。大家为其定义了一个缩放的变换效果，使其变大。这个过渡效果也是使用所有0.3s缓动（ease-in-out）来实现的。

最后，大家再添加一个.clicked类，这个类会在大家完成拇指的点赞时被触发。当这个类被触发时，这个元素会沿着竖直方向上上移并且以45度角旋转，同时不断淡出直到完全透明。

这就是CSS拇指点赞动画效果的全部内容，你可以在自己的网站或者应用中尝试这种动画效果，提升用户体验，也可以自行进行修改和优化。