Css 文本上的动画比例 ()

Question

我正在尝试创建一个缩放文本数字，基本上同时脉动和缩放。我不确定为什么这不起作用，或者我是否过度使用它。脉动效果很好，只是没有变换。

CSS:

  .grad{
    color: #0a77d5; /* Old browsers */
    color: -moz-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); /* FF3.6-15 */
    color: -webkit-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Chrome10-25,Safari5.1-6 */
    color: linear-gradient(to bottom, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

   }


   .pulsate {
     -webkit-animation: pulsate 1.5s ease-out;
     -webkit-animation-iteration-count: infinite;
     opacity: 1.0;
 }
 @-webkit-keyframes pulsate {
     0% {
         opacity: 0.5;
         transform: scale(1.0);
     }
     50% {
         opacity: 1.0;
         -webkit-transform: scale(2.0);
     }
     100% {
         opacity: 0.5;
         -webkit-transform: scale(3.0);
     }
   }

**.shadow {
    text-shadow: 0 1px 0 #ccc,
      0 2px 0 #c9c9c9,
      0 3px 0 #bbb,
      0 4px 0 #b9b9b9,
      0 5px 0 #aaa,
      0 6px 1px rgba(0, 0, 0, .1),
      0 0 5px rgba(0, 0, 0, .1),
      0 1px 3px rgba(0, 0, 0, .3),
      0 3px 5px rgba(0, 0, 0, .2),
      0 5px 10px rgba(0, 0, 0, .25),
      0 10px 10px rgba(0, 0, 0, .2),
      0 20px 20px rgba(0, 0, 0, .15);
    box-shadow: none !important;

  }

HTML:

<b class="shadow grad pulsate">#1</b>

Answer 1

您需要设置display规则，以及其他更改，例如没有前缀的规则。

CSS

.grad {
  color: #0a77d5;
  /* Old browsers */
  color: -moz-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%);
  /* FF3.6-15 */
  color: -webkit-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%);
  /* Chrome10-25,Safari5.1-6 */
  color: linear-gradient(to bottom, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.pulsate {
  -webkit-animation: pulsate 1.5s ease-out;
  -webkit-animation-iteration-count: infinite;
  animation: pulsate 1.5s ease-out;
  animation-iteration-count: infinite;
  opacity: 1.0;
  transform: scale(1);
  display: inline-block;  //I set here the display
}

@-webkit-keyframes pulsate {
  0% {
    opacity: 0.5;
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
  50% {
    opacity: 1.0;
    -webkit-transform: scale(2.0);
    transform: scale(2.0);
  }
  100% {
    opacity: 0.5;
    -webkit-transform: scale(3.0);
    transform: scale(3.0);
  }
}

**.shadow {
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
  box-shadow: none !important;
}

HTML

<b class="shadow grad pulsate">#1</b>

DEMO HERE

Css 文本上的动画比例 ()

Css Animation Scale() on Text

css

animation

transform

scale