css3 實現數字滾動的動畫組件 （react版）

 

 

 

在寫前端頁面的時候，經常會遇到需要寫數字滾動動畫的需求，那我們今天就來實現一個。先去官網看下demo的效果吧：官網

懶得寫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 前端監控提供；只需要簡單幾步就可以搭建一套屬於自己的前端監控系統，快來試試吧 ^ _ ^。