欢迎光临一流素材网,免积分免费素材下载!
秒应用
帝云CMS 帝云CMS

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

所属栏目:DIV+CSS技巧更新时间:2022-11-03 来源:网络 原作者:不详 发布:deepdfhy浏览:0

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

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

screenshots


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);}
}



标签: 滚动 动画
给个评价吧
不支持评论
华为云折上折
企业网站开发