在写前端页面的时候，经常会遇到需要写数字滚动动画的需求，那我们今天就来实现一个。先看一下效果 数字滚动动画
懒得写html版了，有需要的就给我留言吧，就直接贴一个react组件版，直接拿去用。
react 组件JSX:
import React, { Component } from "react" import "./index.scss" export default class NumbersCount extends Component { constructor(props) { super(props) this.state = { visible: true } } render() { const { showValue } = this.props const numberList = (showValue + "").split("") return <div className="numbers-container" style={this.props.numberContainerStyle}> { numberList.map((number, index) => { let scrollClass = "" if (number === "0") { scrollClass = "numbers-scroll0" + Math.ceil(Math.random * 5) } else { scrollClass = "numbers-scroll" + number } return <div className="numbers-box" key={index}> { showValue > 0 ? <span className={scrollClass} style={this.props.numberStyle}> <label>0</label> <label>1</label> <label>2</label> <label>3</label> <label>4</label> <label>5</label> <label>6</label> <label>7</label> <label>8</label> <label>9</label> <label>0</label> </span> : <span> <label>0</label> </span> } </div> }) } </div> } }
css3 动画样式：
.numbers-container { width: 100%; height: 50px; line-height: 50px; margin-top: 6px; display: flex; justify-content: center; $marginTop: 50px; @keyframes scrollNumber0 { 0% { margin-top: 0px; } 100% { margin-top: -1100;} } @-moz-keyframes scrollNumber0 /* Firefox */ { 0% { margin-top: 0px; } 100% { margin-top: -1100;} } @-webkit-keyframes scrollNumber0 /* Safari 和 Chrome */ { 0% { margin-top: 0px; } 100% { margin-top: -1100;} } @-o-keyframes scrollNumber0 /* Opera */ { 0% { margin-top: 0px; } 100% { margin-top: -1100;} } ////////////////////////////// @keyframes scrollNumber1 { 0% { margin-top: 0px; } 100% { margin-top: -1 * $marginTop;} } @-moz-keyframes scrollNumber1 /* Firefox */ { 0% { margin-top: 0px; } 100% { margin-top: -1 * $marginTop;} } @-webkit-keyframes scrollNumber1 /* Safari 和 Chrome */ { 0% { margin-top: 0px; } 100% { margin-top: -1 * $marginTop;} } @-o-keyframes scrollNumber1 /* Opera */ { 0% { margin-top: 0px; } 100% { margin-top: -2 * $marginTop;} } ////////////////////////////// @keyframes scrollNumber2 { 0% { margin-top: 0px; } 100% { margin-top: -2 * $marginTop;} } @-moz-keyframes scrollNumber2 /* Firefox */ { 0% { margin-top: 0px; } 100% { margin-top: -2 * $marginTop;} } @-webkit-keyframes scrollNumber2 /* Safari 和 Chrome */ { 0% { margin-top: 0px; } 100% { margin-top: -2 * $marginTop;} } @-o-keyframes scrollNumber2 /* Opera */ { 0% { margin-top: 0px; } 100% { margin-top: -2 * $marginTop;} } //////////////////////////// @keyframes scrollNumber3 { 0% { margin-top: 0px; } 100% { margin-top: -3 * $marginTop;} } @-moz-keyframes scrollNumber3 /* Firefox */ { 0% { margin-top: 0px; } 100% { margin-top: -3 * $marginTop;} } @-webkit-keyframes scrollNumber3 /* Safari 和 Chrome */ { 0% { margin-top: 0px; } 100% { margin-top: -3 * $marginTop;} } @-o-keyframes scrollNumber3 /* Opera */ { 0% { margin-top: 0px; } 100% { margin-top: -3 * $marginTop;} } //////////////////////////// @keyframes scrollNumber4 { 0% { margin-top: 0px; } 100% { margin-top: -4 * $marginTop;} } @-moz-keyframes scrollNumber4 /* Firefox */ { 0% { margin-top: 0px; } 100% { margin-top: -4 * $marginTop;} } @-webkit-keyframes scrollNumber4 /* Safari 和 Chrome */ { 0% { margin-top: 0px; } 100% { margin-top: -4 * $marginTop;} } @-o-keyframes scrollNumber4 /* Opera */ { 0% { margin-top: 0px; } 100% { margin-top: -4 * $marginTop;} } ///////////////////////////// @keyframes scrollNumber5 { 0% { margin-top: 0px; } 100% { margin-top: -5 * $marginTop;} } @-moz-keyframes scrollNumber5 /* Firefox */ { 0% { margin-top: 0px; } 100% { margin-top: -5 * $marginTop;} } @-webkit-keyframes scrollNumber5 /* Safari 和 Chrome */ { 0% { margin-top: 0px; } 100% { margin-top: -5 * $marginTop;} } @-o-keyframes scrollNumber5 /* Opera */ { 0% { margin-top: 0px; } 100% { margin-top: -5 * $marginTop;} } ///////////////////////////// @keyframes scrollNumber6 { 0% { margin-top: 0px; } 100% { margin-top: -6 * $marginTop;} } @-moz-keyframes scrollNumber6 /* Firefox */ { 0% { margin-top: 0px; } 100% { margin-top: -6 * $marginTop;} } @-webkit-keyframes scrollNumber6 /* Safari 和 Chrome */ { 0% { margin-top: 0px; } 100% { margin-top: -6 * $marginTop;} } @-o-keyframes scrollNumber6 /* Opera */ { 0% { margin-top: 0px; } 100% { margin-top: -6 * $marginTop;} } ///////////////////////////// @keyframes scrollNumber7 { 0% { margin-top: 0px; } 100% { margin-top: -7 * $marginTop;} } @-moz-keyframes scrollNumber7 /* Firefox */ { 0% { margin-top: 0px; } 100% { margin-top: -7 * $marginTop;} } @-webkit-keyframes scrollNumber7 /* Safari 和 Chrome */ { 0% { margin-top: 0px; } 100% { margin-top: -7 * $marginTop;} } @-o-keyframes scrollNumber7 /* Opera */ { 0% { margin-top: 0px; } 100% { margin-top: -7 * $marginTop;} } ///////////////////////////// @keyframes scrollNumber8 { 0% { margin-top: 0px; } 100% { margin-top: -8 * $marginTop;} } @-moz-keyframes scrollNumber8 /* Firefox */ { 0% { margin-top: 0px; } 100% { margin-top: -8 * $marginTop;} } @-webkit-keyframes scrollNumber8 /* Safari 和 Chrome */ { 0% { margin-top: 0px; } 100% { margin-top: -8 * $marginTop;} } @-o-keyframes scrollNumber8 /* Opera */ { 0% { margin-top: 0px; } 100% { margin-top: -8 * $marginTop;} } ///////////////////////////// @keyframes scrollNumber9 { 0% { margin-top: 0px; } 100% { margin-top: -9 * $marginTop;} } @-moz-keyframes scrollNumber9 /* Firefox */ { 0% { margin-top: 0px; } 100% { margin-top: -9 * $marginTop;} } @-webkit-keyframes scrollNumber9 /* Safari 和 Chrome */ { 0% { margin-top: 0px; } 100% { margin-top: -9 * $marginTop;} } @-o-keyframes scrollNumber9 /* Opera */ { 0% { margin-top: 0px; } 100% { margin-top: -9 * $marginTop;} } ///////////////////////////// .numbers-box { width: 57px; height: 50px; overflow-y: hidden; float: left; span { color: #666; width: 100%; height: 550px; font-size: 50px; label { width: 100%; float: left; } label:nth-child(1), label:nth-child(2), label:nth-child(3), label:nth-child(4), label:nth-child(5), label:nth-child(6), label:nth-child(7), label:nth-child(8), label:nth-child(9), label:nth-child(10) { padding-top: 0rem; } } .numbers-scroll00 { margin-top: -10 * $marginTop; animation: scrollNumber0 1s linear 1 normal; -moz-animation: scrollNumber0 1s linear 1 normal; -webkit-animation: scrollNumber0 1s linear 1 normal; -o-animation: scrollNumber0 1s linear 1 normal; } .numbers-scroll01 { margin-top: -10 * $marginTop; animation: scrollNumber0 0.9s linear 1 normal; -moz-animation: scrollNumber0 0.9s linear 1 normal; -webkit-animation: scrollNumber0 0.9s linear 1 normal; -o-animation: scrollNumber0 0.9s linear 1 normal; } .numbers-scroll02 { margin-top: -10 * $marginTop; animation: scrollNumber0 1.4s linear 1 normal; -moz-animation: scrollNumber0 1.4s linear 1 normal; -webkit-animation: scrollNumber0 1.4s linear 1 normal; -o-animation: scrollNumber0 1.4s linear 1 normal; } .numbers-scroll03 { margin-top: -10 * $marginTop; animation: scrollNumber0 1.2s linear 1 normal; -moz-animation: scrollNumber0 1.2s linear 1 normal; -webkit-animation: scrollNumber0 1.2s linear 1 normal; -o-animation: scrollNumber0 1.2s linear 1 normal; } .numbers-scroll04 { margin-top: -10 * $marginTop; animation: scrollNumber0 1.8s linear 1 normal; -moz-animation: scrollNumber0 1.8s linear 1 normal; -webkit-animation: scrollNumber0 1.8s linear 1 normal; -o-animation: scrollNumber0 1.8s linear 1 normal; } .numbers-scroll05 { margin-top: -10 * $marginTop; animation: scrollNumber0 1.6s linear 1 normal; -moz-animation: scrollNumber0 1.6s linear 1 normal; -webkit-animation: scrollNumber0 1.6s linear 1 normal; -o-animation: scrollNumber0 1.6s linear 1 normal; } .numbers-scroll1 { margin-top: -$marginTop; animation: scrollNumber1 1.2s linear 1 normal; -moz-animation: scrollNumber1 1.2s linear 1 normal; -webkit-animation: scrollNumber1 1.2s linear 1 normal; -o-animation: scrollNumber1 1.2s linear 1 normal; } .numbers-scroll2 { margin-top: -2 * $marginTop; animation: scrollNumber2 1.2s linear 1 normal; -moz-animation: scrollNumber2 1.2s linear 1 normal; -webkit-animation: scrollNumber2 1.2s linear 1 normal; -o-animation: scrollNumber2 1.2s linear 1 normal; } .numbers-scroll3 { margin-top: -3 * $marginTop; animation: scrollNumber3 1.2s linear 1 normal; -moz-animation: scrollNumber3 1.2s linear 1 normal; -webkit-animation: scrollNumber3 1.2s linear 1 normal; -o-animation: scrollNumber3 1.2s linear 1 normal; } .numbers-scroll4 { margin-top: -4 * $marginTop; animation: scrollNumber4 1.2s linear 1 normal; -moz-animation: scrollNumber4 1.2s linear 1 normal; -webkit-animation: scrollNumber4 1.2s linear 1 normal; -o-animation: scrollNumber4 1.2s linear 1 normal; } .numbers-scroll5 { margin-top: -5 * $marginTop; animation: scrollNumber5 1.2s linear 1 normal; -moz-animation: scrollNumber5 1.2s linear 1 normal; -webkit-animation: scrollNumber5 1.2s linear 1 normal; -o-animation: scrollNumber5 1.2s linear 1 normal; } .numbers-scroll6 { margin-top: -6 * $marginTop; animation: scrollNumber6 1.2s linear 1 normal; -moz-animation: scrollNumber6 1.2s linear 1 normal; -webkit-animation: scrollNumber6 1.2s linear 1 normal; -o-animation: scrollNumber6 1.2s linear 1 normal; } .numbers-scroll7 { margin-top: -7 * $marginTop; animation: scrollNumber7 1.2s linear 1 normal; -moz-animation: scrollNumber7 1.2s linear 1 normal; -webkit-animation: scrollNumber7 1.2s linear 1 normal; -o-animation: scrollNumber7 1.2s linear 1 normal; } .numbers-scroll8 { margin-top: -8 * $marginTop; animation: scrollNumber8 1.2s linear 1 normal; -moz-animation: scrollNumber8 1.2s linear 1 normal; -webkit-animation: scrollNumber8 1.2s linear 1 normal; -o-animation: scrollNumber8 1.2s linear 1 normal; } .numbers-scroll9 { margin-top: -9 * $marginTop; animation: scrollNumber9 1.2s linear 1 normal; -moz-animation: scrollNumber9 1.2s linear 1 normal; -webkit-animation: scrollNumber9 1.2s linear 1 normal; -o-animation: scrollNumber9 1.2s linear 1 normal; } } }
打包使用即可。需要html版本的，请留言。