查看效果:
?http://hovertree.com/code/css/heartcss.htm
<!doctype html> <title>纯CSS画心 by 何问起</title> <meta charset="utf-8"/> <meta name="keywords" content="纯CSS画心 by 何问起" /> <meta name="description" content="纯CSS画心 by 何问起" /> </head> <body> <style type="text/css"> .hewenqiheart{width:160px;height:200px;position:relative} .hewenqiheart:before{content:" ";border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:80px; height:120px;background:red;-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);-webkit-transform: rotate(-45deg); position:absolute;left:20px;} .hewenqiheart:after{content:" ";border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:80px; height:120px;background:red;-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);-webkit-transform: rotate(45deg); position:absolute;left:48px;top:0px;} </style> <h3>纯CSS画心 by 何问起</h3> <p>hovertree.com</p> <div class="hewenqiheart"> </div> </body> </html>
?更多特效:?http://ini.iteye.com/blog/2165698?? ? ? ?
原文:http://ini.iteye.com/blog/2276256