利用CSS3和React实现数字滚动动画组件

在前端开发过程中，数字滚动动画是提升用户体验的重要元素之一。本文将介绍如何使用CSS3和React来创建一个数字滚动动画组件。首先，可以通过访问官方网站查看示例效果。为了方便大家直接使用，这里提供了一个React组件的实现方案。

React组件实现

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 (
      

        {numberList.map((number, index) => {
          let scrollClass = '';
          if (number === '0') {
            scrollClass = `numbers-scroll0${Math.ceil(Math.random() * 5)}`;
          } else {
            scrollClass = `numbers-scroll${number}`;
          }

          return (
            

              {showValue > 0 ? (
                
                  {Array.from({ length: 11 }).map((_, i) => (
                    {i % 10}
                  ))}
                
              ) : (
                
                  0
                
              )}
            

          );
        })}
      

    );
  }
}

CSS3动画样式

.numbers-container {
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin-top: 6px;
  display: flex;
  justify-content: center;
  $marginTop: 50px;

  @for $i from 0 through 9 {
    @keyframes scrollNumber#{$i} {
      0% { margin-top: 0px; }
      100% { margin-top: -($i + 1) * $marginTop; }
    }

    @-moz-keyframes scrollNumber#{$i} /* Firefox */ {
      0% { margin-top: 0px; }
      100% { margin-top: -($i + 1) * $marginTop; }
    }

    @-webkit-keyframes scrollNumber#{$i} /* Safari 和 Chrome */ {
      0% { margin-top: 0px; }
      100% { margin-top: -($i + 1) * $marginTop; }
    }

    @-o-keyframes scrollNumber#{$i} /* Opera */ {
      0% { margin-top: 0px; }
      100% { margin-top: -($i + 1) * $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(10) {
        padding-top: 0rem;
      }
    }

    @for $i from 0 through 9 {
      .numbers-scroll#{$i} {
        margin-top: -$i * $marginTop;
        animation: scrollNumber#{$i} 1.2s linear 1 normal;
        -moz-animation: scrollNumber#{$i} 1.2s linear 1 normal;
        -webkit-animation: scrollNumber#{$i} 1.2s linear 1 normal;
        -o-animation: scrollNumber#{$i} 1.2s linear 1 normal;
      }
    }

    @for $i from 0 through 4 {
      .numbers-scroll0#{$i} {
        margin-top: -10 * $marginTop;
        animation: scrollNumber0 1.2s * (1 + 0.1 * $i) linear 1 normal;
        -moz-animation: scrollNumber0 1.2s * (1 + 0.1 * $i) linear 1 normal;
        -webkit-animation: scrollNumber0 1.2s * (1 + 0.1 * $i) linear 1 normal;
        -o-animation: scrollNumber0 1.2s * (1 + 0.1 * $i) linear 1 normal;
      }
    }
  }
}

以上代码可以直接用于项目中，如果需要HTML版本的实现，请在评论区留言，我们将尽快提供支持。

本教程由 WebFunny 提供，只需简单几步即可搭建一套属于自己的前端监控系统，快来尝试吧！^_^