html中一个爱心,CSS3实现一个小爱心

当前浏览器不支持播放音乐或语音，请在微信或其他浏览器中播放

CSS3实现一个小爱心

有段时间没更新了......

最近有点迷茫，不知道该干些什么，脑子里乱成了一团

所以.....就懒得更新(这理由...)

好了，切入主题

今天来写一个刚get的一个例子，

用css3实现一个爱心

先来看效果图

第一种实现布局代码

爱心

第二种实现布局方法

heartTwo

通过比较两种实现方法的布局，发现没什么大变化，第一种的实现采用了伪元素来实现，而第二种则多加两个div来实现，效果一模一样，但考虑到性能问题的话，则第一种的性能比较好，第二种增加了dom，因而其性能则相对来说差了点；还有一个要注意的是:由于计算计只能识别0和1，也就是二进制，如果颜色采用英文的话则会比采用十六进制慢了点(十六进制转二进制比英文转二进制快)，所以在性能优化中采用十六进制的颜色设置是个不错的选择；在上面的代码中我没采用十六进制只要是因为我懒

---End---

Stay happy！

封面图来源于网络，如有侵权请及时联系删除