Question

我设法通过在线提供的许多示例来使用jQuery。但是，我想知道在没有任何JavaScript的情况下使用纯CSS是否可以做到这一点。

HTML

<span class="count">9999</span>

的jQuery

$('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

我不介意9999只是在页面加载时旋转而不从0开始。我只是想在页面加载期间显示动画效果。

Answer 1

不确定它到底是你在找什么，但这里有一个类似于使用关键帧的例子。

＆＃13;

div.a {
  width: 50px;
  text-align: right;
  height: 20px;
  overflow: hidden;
}
div.a ul {
  list-style: none;
  margin: 0;
  padding: 0;
  animation: anim 5s forwards;
  animation-iteration-count: 1;
  line-height: 20px;
}
@keyframes anim {
  0% {
    margin-top: 0;
  }
  1%{
    margin-top: -20px;
  }
  4% {
    margin-top: -20px;
  }
  5% {
    margin-top: -40px;
  }
  8% {
    margin-top: -40px;
  }
  9% {
    margin-top: -60px;
  }
  12% {
    margin-top: -60px;
  }
  13% {
    margin-top: -80px;
  }
  16% {
    margin-top: -80px;
  }
  17% {
    margin-top: -100px;
  }
  20% {
    margin-top: -100px;
  }
  21% {
    margin-top: -120px;
  }
  24% {
    margin-top: -120px;
  }
  25% {
    margin-top: -140px;
  }
  28% {
    margin-top: -140px;
  }
  29% {
    margin-top: -160px;
  }
  32% {
    margin-top: -160px;
  }
  33% {
    margin-top: -180px;
  }
  36% {
    margin-top: -180px;
  }
  37% {
    margin-top: -200px;
  }
  40% {
    margin-top: -200px;
  }
  100% {
    margin-top: -200px;
  }
}

＆＃13;

<div class="a">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
  </ul>
</div>

＆＃13;

我真的不确定你会想用css创建的东西:) js对这些东西非常好。

Answer 2

可以在CSS中进行，例如上面的一个好的答案，但如果它适用于像9999这样的大数字，那么使用CSS是不明智的，因为你必须在你的所有这些数字中写下这些数字页。我认为Javascript / Jquery仍然是更好的解决方案。

在加载过程中使用纯CSS动画数字

2 个答案: