陪玩app开发，实现一个爱心按钮的代码解析

陪玩app开发，实现一个爱心按钮的代码解析
❤️ 爱心按钮
制作一个爱心的方式有很多，可以用图标库的爱心，可以写一个svg，可以用图片，我这里就用伪元素的方式做一个爱心。

<!-- fullLove.html -->
<div class="likeBtn" id="likeBtn">
  <span class="heart" id="heart"></span>
</div>

 

/* fullLove.css */
.heart{
  
  height: 13px;
  width: 13px;
  transform: rotate(-45deg) scale(1);
  display: inline-block;
}
.heart::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 0;
  background-color: inherit;
  border-radius: 50%;
  height: 13px;
  width: 13px;
}
.heart::after {
  content: '';
  position: absolute;
  top: 0;
  right: -50%;
  background-color: inherit;
  border-radius: 50%;
  height: 13px;
  width: 13px;
}

再给外层加一些阴影就可以出来拟态化效果

以上就是陪玩app开发，实现一个爱心按钮的代码解析， 更多内容欢迎关注之后的文章