beating heart

No pictures, just use CSS3 to make a beating heart.

HTML:

<span style="color: #0000ff;">　　　　<</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

First, the two divs are floated, and the upper left and upper right corners are rounded:

<span style="color: #800000;">            .box</span>{<span style="color: #ff0000;">
            margin</span>:<span style="color: #0000ff;"> 100px</span>;
            }<span style="color: #800000;">
            .left,.right</span>{<span style="color: #ff0000;">
                float</span>:<span style="color: #0000ff;"> left</span>;
            }<span style="color: #800000;">
            .box div</span>{<span style="color: #ff0000;">
                height</span>:<span style="color: #0000ff;">160px</span>;<span style="color: #ff0000;">
                width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
                border-radius</span>:<span style="color: #0000ff;"> 50px 50px 0 0</span>;<span style="color: #ff0000;">
                background</span>:<span style="color: #0000ff;"> red</span>;
            }                        

becomes:

Then rotate the two divs. The left one uses the lower right corner as the rotation point and rotates 45 degrees clockwise. The right one uses the lower left corner as the rotation point and rotates 45 degrees counterclockwise. Add some shadow:

<span style="color: #800000;">.left</span>{<span style="color: #ff0000;">        
                transform-origin</span>:<span style="color: #0000ff;"> 100% 100%</span>;<span style="color: #ff0000;">
                transform</span>:<span style="color: #0000ff;"> rotate(45deg)</span>;<span style="color: #ff0000;">
                box-shadow</span>:<span style="color: #0000ff;"> 8px 10px 10px #888888</span>;       
        }<span style="color: #800000;">
.right</span>{<span style="color: #ff0000;">                
                transform-origin</span>:<span style="color: #0000ff;"> 0% 100%</span>;<span style="color: #ff0000;">
                transform</span>:<span style="color: #0000ff;"> rotate(-45deg)</span>;<span style="color: #ff0000;">
                box-shadow</span>:<span style="color: #0000ff;"> -10px -1px 10px #888888</span>;     
            }<br><br>

The heart shape comes out:

Get your heart pumping and add some animation:

<span style="color: #800000;">　　　　.box div</span>{<span style="color: #ff0000;">
                animation</span>:<span style="color: #0000ff;"> lb  1s  cubic-bezier(0.3,0.4,0.3,1) 0s infinite</span>;<span style="color: #ff0000;">
                border</span>:<span style="color: #0000ff;"> 0px solid red</span>;/*这个不能少*/
   　　　　　　 }<span style="color: #800000;">
　　　　@keyframes lb</span>{<span style="color: #ff0000;">
                0%{
                    border</span>:<span style="color: #0000ff;"> 10px solid red</span>;<span style="color: #ff0000;">
                    border-radius</span>:<span style="color: #0000ff;"> 58px 58px 0 0</span>;
                }<span style="color: #800000;">
                50%</span>{<span style="color: #ff0000;">
                    border</span>:<span style="color: #0000ff;"> 20px solid red</span>;<span style="color: #ff0000;">
                    border-radius</span>:<span style="color: #0000ff;"> 66px 66px 0 0</span>;
                }<span style="color: #800000;">
                100%</span>{<span style="color: #ff0000;">
                    border</span>:<span style="color: #0000ff;">0px solid red</span>;<span style="color: #ff0000;">
                    border-radius</span>:<span style="color: #0000ff;"> 50px 50px 0 0</span>;
                }<span style="color: #800000;">
            }</span>

Okay, a beating heart is complete.

Full CSS:

<span style="color: #800000;">        <style>
            .box</span>{<span style="color: #ff0000;">
                margin</span>:<span style="color: #0000ff;"> 100px</span>;
            }<span style="color: #800000;">
            .left,.right</span>{<span style="color: #ff0000;">
                float</span>:<span style="color: #0000ff;"> left</span>;
            }<span style="color: #800000;">
            .box div</span>{<span style="color: #ff0000;">
                height</span>:<span style="color: #0000ff;">160px</span>;<span style="color: #ff0000;">
                width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
                border-radius</span>:<span style="color: #0000ff;"> 50px 50px 0 0</span>;<span style="color: #ff0000;">
                background</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
                animation</span>:<span style="color: #0000ff;"> lb  1s  cubic-bezier(0.3,0.4,0.3,1) 0s infinite</span>;<span style="color: #ff0000;">
                border</span>:<span style="color: #0000ff;"> 0px solid red</span>;
            }<span style="color: #800000;">
            .left</span>{<span style="color: #ff0000;">        
                transform-origin</span>:<span style="color: #0000ff;"> 100% 100%</span>;<span style="color: #ff0000;">
                transform</span>:<span style="color: #0000ff;"> rotate(45deg)</span>;<span style="color: #ff0000;">
                box-shadow</span>:<span style="color: #0000ff;"> 8px 10px 10px #888888</span>;       
            }<span style="color: #800000;">
            @keyframes lb</span>{<span style="color: #ff0000;">
                0%{
                    border</span>:<span style="color: #0000ff;"> 10px solid red</span>;<span style="color: #ff0000;">
                    border-radius</span>:<span style="color: #0000ff;"> 58px 58px 0 0</span>;
                }<span style="color: #800000;">
                50%</span>{<span style="color: #ff0000;">
                    border</span>:<span style="color: #0000ff;"> 20px solid red</span>;<span style="color: #ff0000;">
                    border-radius</span>:<span style="color: #0000ff;"> 66px 66px 0 0</span>;
                }<span style="color: #800000;">
                100%</span>{<span style="color: #ff0000;">
                    border</span>:<span style="color: #0000ff;">0px solid red</span>;<span style="color: #ff0000;">
                    border-radius</span>:<span style="color: #0000ff;"> 50px 50px 0 0</span>;
                }<span style="color: #800000;">
            }
            .right</span>{<span style="color: #ff0000;">                
                transform-origin</span>:<span style="color: #0000ff;"> 0% 100%</span>;<span style="color: #ff0000;">
                transform</span>:<span style="color: #0000ff;"> rotate(-45deg)</span>;<span style="color: #ff0000;">
                box-shadow</span>:<span style="color: #0000ff;"> -10px -1px 10px #888888</span>;     
            }<span style="color: #800000;">
        </style>    </span>