陪玩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开发,实现一个爱心按钮的代码解析, 更多内容欢迎关注之后的文章