zoukankan      html  css  js  c++  java
  • 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 前端监控提供只需要简单几步就可以搭建一套属于自己的前端监控系统,快来试试吧 ^ _ ^

  • 相关阅读:
    leetcode 268. Missing Number
    leetcode 189. Rotate Array
    leetcode 118. Pascal's Triangle 、119. Pascal's Triangle II 、120. Triangle
    HDU高精度总结(java大数类)
    一起talk C栗子吧(第八十七回:C语言实例--使用管道进行进程间通信概述)
    iOS敏捷开发之道,经常使用的宏定义总结
    360 网络攻防 hackgame 解题报告(通关)
    打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!
    数列求和
    指尖上的电商---(11)Windows平台部署SolrCloud
  • 原文地址:https://www.cnblogs.com/warm-stranger/p/12378486.html
Copyright © 2011-2022 走看看