如何用最简单的html+css代码制作一个跳动的心脏？

& lthtml？lang="en " >

& lthead & gt

& ltmeta？charset="UTF-8 " >

& lttitle & gt答？心？演示？& lt/title & gt；

& lt风格？type="text/css "？rel="stylesheet " >

。集装箱？{

宽度:？300px

身高:？240px

边距:？自动；

位置:？相对的；

}

@关键帧？心跳-左？{

0%,?100%?{

变换:？尺度(0.95)？旋转(-45度)；

变换-原点:？0?100%;

}

50%?{

变换:？比例(1.00)？旋转(-45度)；

变换-原点:？0?100%;

}

}

@关键帧？心跳-对吗？{

0%,?100%?{

变换:？尺度(0.95)？旋转(45度)；

变换-原点:？100%?100%;

}

50%?{

变换:？比例(1.00)？旋转(45度)；

变换-原点:？100%?100%;

}

}

。左，？。对吗？{

位置:？绝对；

top:？0;

宽度:？150 px；

身高:？240px

边框半径:？150px？150px？0?0;

背景:？浅珊瑚色；

动画-迭代-计数:？无限；

动画-延迟:？500ms

动画-定时-功能:？三次贝塞尔曲线(0，？0,?0,?1.74);

动画-播放-状态:？跑步；

动画-时长:？2000ms

}

。向左？{

动画-名称:？心跳-左；

左:？150 px；

变换:旋转(-45度)；

变换-原点:？0?100%;

方框阴影:？插页？6px？6px？0?6px？rgba(255，？255,?255,?0.1);

}

。对吗？{

对不对:？150 px；

变换:旋转(45度)；

动画-名称:？心跳——对；

变换-原点:？100%?100%;

方框阴影:？插页？-6px？-6px？0?6px？rgba(255，？255,?255,?0.1);

}

& lt/style & gt；

& lt/head & gt；

& ltbody & gt

& ltdiv？class="container " >

& ltdiv？class="left " >& lt/div & gt；

& ltdiv？class="right " >& lt/div & gt；

& lt/div & gt；

& lt/body & gt；

& lt/html & gt；