利用纯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);} }