摘要：
设置属性之后再次添加一个，设置相反的rotate设置其中一个的left值就成了为了看起来有立体感，可以设置左边的box-shadow。CSSbody{height:100%;margin:0;}div{width:1px;height:1px;margin:300pxauto;position:relative;animation:tiaodong.8slinearinfinite;}div::before,div::after{content:'';position:absolute;width:80px;height:120px;background-color:red;border-radius:50px50px00;}div::after{left:28px;transform:rotate;}div::before{transform:rotate;box-shadow:-5px-5px10pxgrey;}@keyframestiaodong{0%{transform:scale;}50%{transform:scale;}100%{transform:scale;}}HTML用的是after和before伪元素实现的，没有考虑兼容性，在IE10之前就显示不出来了。可以用span元素替换掉after和before解决掉。百度出的方法，并不能解决。暂时搁置求指点迷津QAQ
效果图：
实现原理：
可以把这个心分为两部分，两个长方形，分别设置 border-radius，transform: rotate() 。
设置属性之后
再次添加一个，设置相反的 rotate
设置其中一个的 left 值 就成了
为了看起来有立体感，可以设置左边的box-shadow 。
CSS
body{height:100%;margin:0; }div{width:1px;height:1px;margin:300px auto;position:relative;animation:tiaodong .8s linear infinite; }div::before,div::after{content:'';position:absolute;width:80px;height:120px;background-color:red;border-radius:50px 50px 0 0; }div::after{left:28px;transform:rotate(45deg); }div::before{transform:rotate(-45deg);box-shadow:-5px -5px 10px grey; }@keyframes tiaodong{0%{ transform:scale(1); }50%{transform:scale(1.05); }100%{transform:scale(1); }}
HTML
<div></div>
用的是 after 和 before 伪元素实现的，没有考虑兼容性，在 IE 10 之前就显示不出来了。
可以用 span 元素替换掉 after 和 before 解决掉。
需要加上： -ms-transform 。
若是用 span 元素画的话，需要右边的块设置 z-index 属性。
遇到的问题：
虽然在 IE 下画出来心了，但是动画却做不出来。百度出的方法，并不能解决。暂时搁置
求指点迷津QAQ