Вы можете создать оригинальную анимацию на Эффект биения сердца на чистом CSS3, где сами выстраиваете размер и время пульсаций. Вы наверное никогда не думали о создании формы сердца полностью используя CSS3. Кроме того вы можете включить анимацию, чтобы показать, что сердце действительно избивает. Это можно легко сделать с помощью анимации CSS3. Никакая вспышка или изображения не требуются.
Ниже приведен код стиля CSS необходимый для создания формы сердца с анимацией избиения в CSS3.
HTML
Код
<div class="zornumol_tilasergam"></div>
CSS
Код
.zornumol_tilasergam {
position: relative;
width: 50px;
-webkit-animation: heart-beats 3s infinite;
animation: heart-beats 3s infinite;
}
.zornumol_tilasergam:before,
.zornumol_tilasergam:after {
background: #fd3803;
position: absolute;
width: 23px;
height: 37px;
top: 0;
left: 22px;
content: '';
border-radius: 50px 50px 0 0;
transform: rotate(-45deg) translateZ(0);
-webkit-transform: rotate(-45deg) translateZ(0);
transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
}
.zornumol_tilasergam:after {
left: 0;
transform: rotate(45deg) translateZ(0);
-webkit-transform: rotate(45deg) translateZ(0);
transform-origin :100% 100%;
-webkit-transform-origin: 100% 100%;
}
@keyframes heart-beats {
0% { transform: scale(1); background-color:black;}
7% { transform: scale(1.2); }
12% { transform: scale(1.1); }
20% { transform: scale(1.3); }
60% { transform: scale(1); }
100% { transform: scale(0.99); }
}
@-webkit-keyframes heart-beats {
0% { -webkit-transform: scale(1); }
7% { -webkit-transform: scale(1.2); }
12% { -webkit-transform: scale(1.1); }
20% { -webkit-transform: scale(1.3); }
60% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(0.99); }
}
Демонстрация:
