<div class="demo"> <div id="heart"><div class="k"></div></div> </div>
body { margin: 0; padding: 0; background: #fff; } .demo{ bottom: 0; height: 120px; left: 0; margin: auto; position: absolute; top: 0; right: 0; width: 120px; } /* Сердце */ #heart { position: relative; width: 100px; height: 90px; margin: 0 auto; animation: b 1.5s ease-in-out infinite; } #heart:before, #heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; -webkit-border-radius: 50px; border-radius: 50px 50px 0 0; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } #heart:after { left: 0; -moz-box-shadow: 3px -45px 5px 3px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 3px -45px 5px 3px rgba(255, 255, 255, 0.5); box-shadow: 3px -45px 5px 3px rgba(255, 255, 255, 0.5); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } .k { position: absolute; top: 16px; left: 55px; z-index: 3; width: 0px; height: 0px; animation: a 1.5s infinite; } @keyframes a { 0% { -moz-box-shadow: 0 0 65px 15px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 65px 15px rgba(255, 255, 255, 0.5); box-shadow: 0 0 65px 15px rgba(255, 255, 255, 0.5); } 50% { -moz-box-shadow: 0 0 65px 25px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 65px 25px rgba(255, 255, 255, 0.5); box-shadow: 0 0 65px 25px rgba(255, 255, 255, 0.5); } 100% { -moz-box-shadow: 0 0 65px 15px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 65px 15px rgba(255, 255, 255, 0.5); box-shadow: 0 0 65px 15px rgba(255, 255, 255, 0.5); } } @keyframes b { 0% { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } 50% { -moz-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 100% { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } }