pulsujące serce

ikona pulsującego serca (lub dowolnego innego symbolu, znaku).

 

1.ikona osadzona jako czcionka – Awesome

w head zamieszczamy:

w kodzie html:

<span class="fa fa-heart pulse"></span>

w stylach:

span.fa-heart {
  color: #fff;
  font-size: 15px;
  margin: 0 2px; 
}

 

2. animacja ruchu, w css:

.pulse {
  -webkit-animation-name: pulse;
          animation-name: pulse;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear; }

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  50% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes pulse {
  0% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  50% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

–

#css#font