• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Анимационное сердечко с использованием CSS3
Анимационное сердечко с использованием CSS3
Kosten
Пятница, 05 Января 2018 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Вы можете создать оригинальную анимацию на Эффект биения сердца на чистом 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); }
}

Демонстрация:
Прикрепления: 1626119.png (1.2 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Анимационное сердечко с использованием CSS3
  • Страница 1 из 1
  • 1
Поиск: