Биение сердца на чистом CSS3
HTML
<div class="demo">
<div id="heart"><div class="k"></div></div>
</div>
CSS
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 10.0s 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);
...