css3 实现数字滚动的动画组件 （react版）

在写前端页面的时候，经常会遇到需要写数字滚动动画的需求，那我们今天就来实现一个。先看一下效果 数字滚动动画

懒得写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版本的，请留言。

本教程由 www.webfunny.cn 前端监控提供；只需要简单几步就可以搭建一套属于自己的前端监控系统，快来试试吧 ^ _ ^。