CSS3实现一个小爱心
Posted 恋上番茄的鸡蛋
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3实现一个小爱心相关的知识，希望对你有一定的参考价值。
CSS3实现一个小爱心
有段时间没更新了......
最近有点迷茫，不知道该干些什么，脑子里乱成了一团
所以.....就懒得更新（这理由...）
好了，切入主题
今天来写一个刚get的一个例子，
用css3实现一个爱心
先来看效果图
第一种实现布局代码
<html lang="zh"><head><meta charset="UTF-8"><title>爱心</title><style>html,body{margin: 0;padding: 0;}div{width: 200px;height: 200px;margin: 0 auto;position: relative;}div:before,div:after{content: '';width: 100px;height: 140px;margin: 20px 35px;background-color: red;position: absolute;left: 0;top: 0;-webkit-border-radius: 50px 50px 0 0;-moz-border-radius: 50px 50px 0 0;border-radius: 50px 50px 0 0;}div:before{-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}div:after{-webkit-transform: translateX(30px) rotate(45deg);-moz-transform: translateX(30px) rotate(45deg);-ms-transform: translateX(30px) rotate(45deg);-o-transform: translateX(30px) rotate(45deg);transform: translateX(30px) rotate(45deg);}</style></head><body><div></div></body></html>
第二种实现布局方法
<html lang="zh"><head><meta charset="UTF-8"><title>heartTwo</title></head><style>html,body{margin: 0;padding: 0;}.container{width: 200px;height: 200px;margin: 0 auto;position: relative;}.left, .right{content: '';width: 100px;height: 140px;margin: 20px 35px;background-color: red;position: absolute;left: 0;top: 0;-webkit-border-radius: 50px 50px 0 0;-moz-border-radius: 50px 50px 0 0;border-radius: 50px 50px 0 0;}.left{-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}.right{-webkit-transform: translateX(30px) rotate(45deg);-moz-transform: translateX(30px) rotate(45deg);-ms-transform: translateX(30px) rotate(45deg);-o-transform: translateX(30px) rotate(45deg);transform: translateX(30px) rotate(45deg);}</style><body><div class="container"><div class="left"></div><div class="right"></div></div></body></html>
通过比较两种实现方法的布局，发现没什么大变化，第一种的实现采用了伪元素来实现，而第二种则多加两个div来实现，效果一模一样，但考虑到性能问题的话，则第一种的性能比较好，第二种增加了dom，因而其性能则相对来说差了点；还有一个要注意的是:由于计算计只能识别0和1，也就是二进制，如果颜色采用英文的话则会比采用十六进制慢了点（十六进制转二进制比英文转二进制快），所以在性能优化中采用十六进制的颜色设置是个不错的选择；在上面的代码中我没采用十六进制只要是因为我懒
---End---
Stay happy！
封面图来源于网络，如有侵权请及时联系删除
以上是关于CSS3实现一个小爱心的主要内容，如果未能解决你的问题，请参考以下文章