Beating heart, beating

Beating heart, beating

Do not use images. Use CSS3 to make a beating heart.

HTML:

　　　　<div class="box">            <div class="left"></div>            <div class="right"></div>        </div>

First, the two divs float and circle on the left and the upper right corner:

            .box{            margin: 100px;            }            .left,.right{                float: left;            }            .box div{                height:160px;                width: 100px;                border-radius: 50px 50px 0 0;                background: red;            }                        

To:

Then let the two divs rotate. the right corner of the left side is the rotation point and the right side is 45 degrees, and the right side is the rotation point in the lower left corner to 45 degrees, adding a shadow:

.left{                        transform-origin: 100% 100%;                transform: rotate(45deg);                box-shadow: 8px 10px 10px #888888;               }.right{                                transform-origin: 0% 100%;                transform: rotate(-45deg);                box-shadow: -10px -1px 10px #888888;                 }

The heart shape came out:

Let's get started and add some animations:

. Box div {animation: lb 1 s cubic-bezr (0.3, 0.4, 0.3, 1) 0 s infinite; border: 0px solid red; /* This cannot be less */} @ keyframes lb {0% {border: 10px solid red; border-radius: 58px 58px 0 0;} 50% {border: 20px solid red; border-radius: 66px 66px 0 0;} 100% {border: 0px solid red; border-radius: 50px 50px 0 0 0 ;}}

Well, a beating heart is finished.

Complete CSS:

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