css点赞效果制作

CSS点赞效果制作可以让网页更加生动有趣，下面介绍一下制作方法。

HTML代码：
<div class="like">
  <i class="heart"></i>
  <span class="like-count">100</span>
</div>
CSS代码：
.like {
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding-left: 20px;
}
.like .heart {
  width: 20px;
  height: 20px;
  background-image: url('heart.png');
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.3s ease-in-out;
}
.like.active .heart {
  transform: scale(1.2);
  opacity: 0.9;
}
.like .like-count {
  margin-left: 5px;
}
JavaScript代码：
var like = document.querySelector('.like');
like.onclick = function() {
  this.classList.toggle('active');
}
;
 

通过上述代码可以制作出一个带有CSS点赞效果的网页，实现了在点击点赞按钮时，心形图标进行缩放并减小透明度的效果，增加了互动性和美观性。