CSS3实现数字滚动的动画效果

免费开源可商用的PHP万能建站程序-DiYunCMS(帝云CMS)

利用纯CSS3实现数字滚动的特效，如下图所示：

HTML

<div class="d-flex align-items-center justify-content-end" style="height: 60px; min-width: 110px; overflow: hidden">
   <div class="rolling1 ">
      <div>0</div><div>9</div><div>8</div><div>9</div><div>0</div><div>1</div>
   </div>
   <div class="rolling2  ">
      <div>1</div><div>3</div><div>4</div><div>3</div><div>2</div><div>0</div>
   </div>
   <div>%</div>
</div>

CSS

.rolling1 {
    -webkit-animation: rolling1 1s ease;
    animation: rolling1 1s ease;
    -webkit-transform: translateY(-152px);
    -ms-transform: translateY(-152px);
    transform: translateY(-152px);
}
.rolling2 {
    -webkit-animation: rolling2 1.2s ease;
    animation: rolling2 1.2s ease;
    -webkit-transform: translateY(-151px);
    -ms-transform: translateY(-151px);
    transform: translateY(-151px);
}


@keyframes rolling1
{
    from   {transform: translateY(147px);}
    to {transform: translateY(-152px);}
}
@keyframes rolling2
{
    from {transform: translateY(147px);}
    to {transform: translateY(-151px);}
}