舞动的字符

于 2020-08-16 02:41:00 发布
阅读量432 收藏
点赞数 2
分类专栏： # GSAP + React 文章标签： react js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BSCHN123/article/details/108031358
版权

上一篇的炫酷小圈圈，获得了不错的阅读量，博主就继续提供利用react来做gsap.
温馨提示：这次代码量比较大。

如果不懂React如何安装，请点击这里学习安装React

先看效果如何：
由于内存较大，只能通过链接形式来上传。 点击这里可以观看效果

在上React代码之前，得安装gsap, 命令行：npm install gsap react-gsap
现在就可以上代码了：

// WordsDance.js 文件
import React, { Component } from 'react'
import {Tween} from 'react-gsap'
import './WordsDanceStyle.css'

class Welcome extends Component {
    render() {
        return (
            <div>
                {/* This part is 'W' first */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '-200px', y: '35px', opacity: 1}} 
                    repeat={2}
                    stagger={0.1} 
                    ease="elastic.out(1, 0.1)"
                    duration={2}>
                    <div className='welcomeOne'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '-190px', y: '36px', opacity: 1}} 
                    repeat={2}
                    stagger={0.2} 
                    ease="elastic.out(1, 0.1)"
                    duration={3}>
                    <div className='welcomeTwo'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '-180px', y: '37px', opacity: 1}} 
                    repeat={2}
                    stagger={0.3} 
                    ease="elastic.out(1, 0.1)"
                    duration={4}>
                    <div className='welcomeThree'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '-170px', y: '38px', opacity: 1}} 
                    repeat={2}
                    stagger={0.4} 
                    ease="elastic.out(1, 0.1)"
                    duration={5}>
                    <div className='welcomeFour'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '-160px', y: '39px', opacity: 1}} 
                    repeat={2}
                    stagger={0.5} 
                    ease="elastic.out(1, 0.1)"
                    duration={6}>
                    <div className='welcomeFourOne'/>
                </Tween>

                {/* This part is 'W' second */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '-150px', y: '38px', opacity: 1}} 
                    repeat={2}
                    stagger={0.6} 
                    ease="elastic.out(1, 0.1)"
                    duration={7}>
                    <div className='welcomeFive'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '-140px', y: '37px', opacity: 1}} 
                    repeat={2}
                    stagger={0.7} 
                    ease="elastic.out(1, 0.1)"
                    duration={8}>
                    <div className='welcomeSix'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '-130px', y: '36px', opacity: 1}} 
                    repeat={2}
                    stagger={0.8} 
                    ease="elastic.out(1, 0.1)"
                    duration={9}>
                    <div className='welcomeSeven'/>
                </Tween>

                {/* This part is 'W' third */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '-120px', y: '-12px', opacity: 1}} 
                    repeat={2}
                    stagger={0.9} 
                    ease="elastic.out(1, 0.1)"
                    duration={10}>
                    <div className='welcomeEight'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '-106px', y: '-14px', opacity: 1}} 
                    repeat={2}
                    stagger={1.0} 
                    ease="elastic.out(1, 0.1)"
                    duration={11}>
                    <div className='welcomeNine'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '-95px', y: '-13px', opacity: 1}} 
                    repeat={2}
                    stagger={1.1} 
                    ease="elastic.out(1, 0.1)"
                    duration={12}>
                    <div className='welcomeTen'/>
                </Tween>

                {/* This part is 'W' four */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '-93px', y: '35px', opacity: 1}} 
                    repeat={2}
                    stagger={1.2} 
                    ease="elastic.out(1, 0.1)"
                    duration={13}>
                    <div className='welcomeEleven'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '-85px', y: '80px', opacity: 1}} 
                    repeat={2}
                    stagger={1.3} 
                    ease="elastic.out(1, 0.1)"
                    duration={14}>
                    <div className='welcomeTwelve'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '-71px', y: '84px', opacity: 1}} 
                    repeat={2}
                    stagger={1.4} 
                    ease="elastic.out(1, 0.1)"
                    duration={15}>
                    <div className='welcomeThirteen'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '-71px', y: '85px', opacity: 1}} 
                    repeat={2}
                    stagger={1.5} 
                    ease="elastic.out(1, 0.1)"
                    duration={16}>
                    <div className='welcomeThirteenOne'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '-71px', y: '83px', opacity: 1}} 
                    repeat={2}
                    stagger={1.6} 
                    ease="elastic.out(1, 0.1)"
                    duration={17}>
                    <div className='welcomeThirteenTwo'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '-71px', y: '83px', opacity: 1}} 
                    repeat={2}
                    stagger={1.7} 
                    ease="elastic.out(1, 0.1)"
                    duration={18}>
                    <div className='welcomeThirteenThree'/>
                </Tween>

                {/* This part is 'E' first */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '-10px', y: '80px', opacity: 1}} 
                    repeat={2}
                    stagger={1.8} 
                    ease="elastic.out(1, 0.1)"
                    duration={19}>
                    <div className='welcomeEOne'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '0px', y: '80px', opacity: 1}} 
                    repeat={2}
                    stagger={1.9} 
                    ease="elastic.out(1, 0.1)"
                    duration={20}>
                    <div className='welcomeETwo'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '10px', y: '80px', opacity: 1}} 
                    repeat={2}
                    stagger={2.0} 
                    ease="elastic.out(1, 0.1)"
                    duration={21}>
                    <div className='welcomeEThree'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '20px', y: '80px', opacity: 1}} 
                    repeat={2}
                    stagger={2.1} 
                    ease="elastic.out(1, 0.1)"
                    duration={22}>
                    <div className='welcomeEFour'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '30px', y: '80px', opacity: 1}} 
                    repeat={2}
                    stagger={2.2} 
                    ease="elastic.out(1, 0.1)"
                    duration={23}>
                    <div className='welcomeEFive'/>
                </Tween>

                {/* This part is 'E' second */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '-10px', y: '90px', opacity: 1}} 
                    repeat={2}
                    stagger={2.3} 
                    ease="elastic.out(1, 0.1)"
                    duration={24}>
                    <div className='welcomeESix'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '-10px', y: '95px', opacity: 1}} 
                    repeat={2}
                    stagger={2.4} 
                    ease="elastic.out(1, 0.1)"
                    duration={25}>
                    <div className='welcomeESeven'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '-10px', y: '100px', opacity: 1}} 
                    repeat={2}
                    stagger={2.5} 
                    ease="elastic.out(1, 0.1)"
                    duration={26}>
                    <div className='welcomeEEight'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '-10px', y: '105px', opacity: 1}} 
                    repeat={2}
                    stagger={2.6} 
                    ease="elastic.out(1, 0.1)"
                    duration={27}>
                    <div className='welcomeENine'/>
                </Tween>

                {/* This part is 'E' third */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '0px', y: '97px', opacity: 1}} 
                    repeat={2}
                    stagger={2.7} 
                    ease="elastic.out(1, 0.1)"
                    duration={28}>
                    <div className='welcomeETen'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '10px', y: '97px', opacity: 1}} 
                    repeat={2}
                    stagger={2.8} 
                    ease="elastic.out(1, 0.1)"
                    duration={29}>
                    <div className='welcomeEEleven'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '20px', y: '97px', opacity: 1}} 
                    repeat={2}
                    stagger={2.9} 
                    ease="elastic.out(1, 0.1)"
                    duration={30}>
                    <div className='welcomeETwelve'/>
                </Tween>

                {/* This part is 'E' fourth  */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '0px', y: '105px', opacity: 1}} 
                    repeat={2}
                    stagger={3.0} 
                    ease="elastic.out(1, 0.1)"
                    duration={31}>
                    <div className='welcomeEThirteen'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '10px', y: '105px', opacity: 1}} 
                    repeat={2}
                    stagger={3.1} 
                    ease="elastic.out(1, 0.1)"
                    duration={32}>
                    <div className='welcomeEFourteen'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '20px', y: '105px', opacity: 1}} 
                    repeat={2}
                    stagger={3.2} 
                    ease="elastic.out(1, 0.1)"
                    duration={33}>
                    <div className='welcomeEFifteen'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '30px', y: '105px', opacity: 1}} 
                    repeat={2}
                    stagger={3.3} 
                    ease="elastic.out(1, 0.1)"
                    duration={34}>
                    <div className='welcomeESixteen'/>
                </Tween>

                {/* This part is 'L' first */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '0px', y: '80px', opacity: 1}} 
                    repeat={2}
                    stagger={3.4} 
                    ease="elastic.out(1, 0.1)"
                    duration={35}>
                    <div className='welcomeLFirst'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '0px', y: '90px', opacity: 1}} 
                    repeat={2}
                    stagger={3.5} 
                    ease="elastic.out(1, 0.1)"
                    duration={36}>
                    <div className='welcomeLSecond'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '0px', y: '100px', opacity: 1}} 
                    repeat={2}
                    stagger={3.6} 
                    ease="elastic.out(1, 0.1)"
                    duration={37}>
                    <div className='welcomeLThird'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '0px', y: '110px', opacity: 1}} 
                    repeat={2}
                    stagger={3.7} 
                    ease="elastic.out(1, 0.1)"
                    duration={38}>
                    <div className='welcomeLFourth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '0px', y: '115px', opacity: 1}} 
                    repeat={2}
                    stagger={3.8} 
                    ease="elastic.out(1, 0.1)"
                    duration={39}>
                    <div className='welcomeLFifth'/>
                </Tween>

                {/* This part is 'L' second */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '10px', y: '115px', opacity: 1}} 
                    repeat={2}
                    stagger={3.9} 
                    ease="elastic.out(1, 0.1)"
                    duration={40}>
                    <div className='welcomeLSixth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '20px', y: '115px', opacity: 1}} 
                    repeat={2}
                    stagger={4.0} 
                    ease="elastic.out(1, 0.1)"
                    duration={41}>
                    <div className='welcomeLSeventh'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '30px', y: '115px', opacity: 1}} 
                    repeat={2}
                    stagger={4.1} 
                    ease="elastic.out(1, 0.1)"
                    duration={42}>
                    <div className='welcomeLEighth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '40px', y: '115px', opacity: 1}} 
                    repeat={2}
                    stagger={4.2} 
                    ease="elastic.out(1, 0.1)"
                    duration={43}>
                    <div className='welcomeLNineth'/>
                </Tween>

                {/* This part is 'C' first */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '70px', y: '60px', opacity: 1}} 
                    repeat={2}
                    stagger={4.3} 
                    ease="elastic.out(1, 0.1)"
                    duration={44}>
                    <div className='welcomeCFirst'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '60px', y: '50px', opacity: 1}} 
                    repeat={2}
                    stagger={4.4} 
                    ease="elastic.out(1, 0.1)"
                    duration={45}>
                    <div className='welcomeCSecond'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '55px', y: '40px', opacity: 1}} 
                    repeat={2}
                    stagger={4.5} 
                    ease="elastic.out(1, 0.1)"
                    duration={46}>
                    <div className='welcomeCThird'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '45px', y: '30px', opacity: 1}} 
                    repeat={2}
                    stagger={4.6} 
                    ease="elastic.out(1, 0.1)"
                    duration={47}>
                    <div className='welcomeCFourth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '35px', y: '30px', opacity: 1}} 
                    repeat={2}
                    stagger={4.7} 
                    ease="elastic.out(1, 0.1)"
                    duration={48}>
                    <div className='welcomeCFifth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '25px', y: '30px', opacity: 1}} 
                    repeat={2}
                    stagger={4.8} 
                    ease="elastic.out(1, 0.1)"
                    duration={49}>
                    <div className='welcomeCSixth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '15px', y: '30px', opacity: 1}} 
                    repeat={2}
                    stagger={4.9} 
                    ease="elastic.out(1, 0.1)"
                    duration={50}>
                    <div className='welcomeCSeventh'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '10px', y: '30px', opacity: 1}} 
                    repeat={2}
                    stagger={5.0} 
                    ease="elastic.out(1, 0.1)"
                    duration={51}>
                    <div className='welcomeCEighth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '5px', y: '30px', opacity: 1}} 
                    repeat={2}
                    stagger={5.1} 
                    ease="elastic.out(1, 0.1)"
                    duration={52}>
                    <div className='welcomeCNineth'/>
                </Tween>

                {/* This part is 'C' second */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '60px', y: '75px', opacity: 1}} 
                    repeat={2}
                    stagger={5.2} 
                    ease="elastic.out(1, 0.1)"
                    duration={53}>
                    <div className='welcomeCTenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '55px', y: '70px', opacity: 1}} 
                    repeat={2}
                    stagger={5.3} 
                    ease="elastic.out(1, 0.1)"
                    duration={54}>
                    <div className='welcomeCEleventh'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '50px', y: '66px', opacity: 1}} 
                    repeat={2}
                    stagger={5.4} 
                    ease="elastic.out(1, 0.1)"
                    duration={55}>
                    <div className='welcomeCTwelfth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '50px', y: '54px', opacity: 1}} 
                    repeat={2}
                    stagger={5.5} 
                    ease="elastic.out(1, 0.1)"
                    duration={56}>
                    <div className='welcomeCThirteenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '46px', y: '54px', opacity: 1}} 
                    repeat={2}
                    stagger={5.6} 
                    ease="elastic.out(1, 0.1)"
                    duration={57}>
                    <div className='welcomeCFourteenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '40px', y: '54px', opacity: 1}} 
                    repeat={2}
                    stagger={5.7} 
                    ease="elastic.out(1, 0.1)"
                    duration={58}>
                    <div className='welcomeCFifteenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '36px', y: '54px', opacity: 1}} 
                    repeat={2}
                    stagger={5.8} 
                    ease="elastic.out(1, 0.1)"
                    duration={59}>
                    <div className='welcomeCSixteenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '30px', y: '54px', opacity: 1}} 
                    repeat={2}
                    stagger={5.9} 
                    ease="elastic.out(1, 0.1)"
                    duration={60}>
                    <div className='welcomeCSeventeenth'/>
                </Tween>

                {/* This part is 'O' first */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '70px', y: '70px', opacity: 1}} 
                    repeat={2}
                    stagger={6.0} 
                    ease="elastic.out(1, 0.1)"
                    duration={61}>
                    <div className='welcomeOFirst'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '70px', y: '72px', opacity: 1}} 
                    repeat={2}
                    stagger={6.1} 
                    ease="elastic.out(1, 0.1)"
                    duration={62}>
                    <div className='welcomeOSecond'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '70px', y: '74px', opacity: 1}} 
                    repeat={2}
                    stagger={6.2} 
                    ease="elastic.out(1, 0.1)"
                    duration={63}>
                    <div className='welcomeOThird'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '70px', y: '72px', opacity: 1}} 
                    repeat={2}
                    stagger={6.3} 
                    ease="elastic.out(1, 0.1)"
                    duration={64}>
                    <div className='welcomeOFourth'/>
                </Tween>

                {/* This part is 'O' second */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '75px', y: '72px', opacity: 1}} 
                    repeat={2}
                    stagger={6.4} 
                    ease="elastic.out(1, 0.1)"
                    duration={65}>
                    <div className='welcomeOFifth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '80px', y: '72px', opacity: 1}} 
                    repeat={2}
                    stagger={6.5} 
                    ease="elastic.out(1, 0.1)"
                    duration={66}>
                    <div className='welcomeOSixth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '85px', y: '72px', opacity: 1}} 
                    repeat={2}
                    stagger={6.6} 
                    ease="elastic.out(1, 0.1)"
                    duration={67}>
                    <div className='welcomeOSeventh'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '90px', y: '58px', opacity: 1}} 
                    repeat={2}
                    stagger={6.7} 
                    ease="elastic.out(1, 0.1)"
                    duration={68}>
                    <div className='welcomeOEighth'/>
                </Tween>

                {/* This part is 'O' third */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '83px', y: '52px', opacity: 1}} 
                    repeat={2}
                    stagger={6.8} 
                    ease="elastic.out(1, 0.1)"
                    duration={69}>
                    <div className='welcomeONineth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '83px', y: '49px', opacity: 1}} 
                    repeat={2}
                    stagger={6.9} 
                    ease="elastic.out(1, 0.1)"
                    duration={70}>
                    <div className='welcomeOTenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '83px', y: '50px', opacity: 1}} 
                    stagger={7.0} 
                    ease="elastic.out(1, 0.1)"
                    duration={71}>
                    <div className='welcomeOEleventh'/>
                </Tween>

                {/* This part is 'O' fourth */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '83px', y: '59px', opacity: 1}} 
                    repeat={2}
                    stagger={7.1} 
                    ease="elastic.out(1, 0.1)"
                    duration={72}>
                    <div className='welcomeOTwelfth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '83px', y: '67px', opacity: 1}} 
                    repeat={2}
                    stagger={7.2} 
                    ease="elastic.out(1, 0.1)"
                    duration={73}>
                    <div className='welcomeOThirteenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '70px', y: '75px', opacity: 1}} 
                    repeat={2}
                    stagger={7.3} 
                    ease="elastic.out(1, 0.1)"
                    duration={74}>
                    <div className='welcomeOFourteenth'/>
                </Tween>

                {/* This part is 'O' fifth */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '60px', y: '75px', opacity: 1}} 
                    repeat={2}
                    stagger={7.4} 
                    ease="elastic.out(1, 0.1)"
                    duration={75}>
                    <div className='welcomeOFifteenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '50px', y: '75px', opacity: 1}} 
                    repeat={2}
                    stagger={7.5} 
                    ease="elastic.out(1, 0.1)"
                    duration={76}>
                    <div className='welcomeOSixteenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '40px', y: '75px', opacity: 1}} 
                    repeat={2}
                    stagger={7.6} 
                    ease="elastic.out(1, 0.1)"
                    duration={77}>
                    <div className='welcomeOSeventeenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '30px', y: '86px', opacity: 1}} 
                    repeat={2}
                    stagger={7.7} 
                    ease="elastic.out(1, 0.1)"
                    duration={78}>
                    <div className='welcomeOEightteenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '30px', y: '105px', opacity: 1}} 
                    repeat={2}
                    stagger={7.8} 
                    ease="elastic.out(1, 0.1)"
                    duration={79}>
                    <div className='welcomeONineteenth'/>
                </Tween>

                {/* This part is 'O' sixth */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '30px', y: '110px', opacity: 1}} 
                    repeat={2}
                    stagger={7.9} 
                    ease="elastic.out(1, 0.1)"
                    duration={80}>
                    <div className='welcomeOTwenty'/>
                </Tween>

                {/* This part is 'M' first  */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '110px', y: '87px', opacity:1}} 
                    repeat={2}
                    stagger={8.0} 
                    ease="elastic.out(1, 0.1)"
                    duration={81}>
                    <div className='welcomeMFirst'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '115px', y: '95px',  opacity:1}} 
                    repeat={2}
                    stagger={8.1} 
                    ease="elastic.out(1, 0.1)"
                    duration={82}>
                    <div className='welcomeMSecond'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '115px', y: '85px',  opacity:1}} 
                    repeat={2}
                    stagger={8.2} 
                    ease="elastic.out(1, 0.1)"
                    duration={83}>
                    <div className='welcomeMThird'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '115px', y: '75px',  opacity:1}} 
                    repeat={2}
                    stagger={8.3} 
                    ease="elastic.out(1, 0.1)"
                    duration={84}>
                    <div className='welcomeMFourth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '115px', y: '65px',  opacity:1}} 
                    repeat={2}
                    stagger={8.4} 
                    ease="elastic.out(1, 0.1)"
                    duration={85}>
                    <div className='welcomeMFifth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '117px', y: '55px',  opacity:1}} 
                    repeat={2}
                    stagger={8.5} 
                    ease="elastic.out(1, 0.1)"
                    duration={86}>
                    <div className='welcomeMSixth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '125px', y: '100px',  opacity:1}} 
                    repeat={2}
                    stagger={8.6} 
                    ease="elastic.out(1, 0.1)"
                    duration={87}>
                    <div className='welcomeMSeventh'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '124px', y: '145px',  opacity:1}} 
                    repeat={2}
                    stagger={8.7} 
                    ease="elastic.out(1, 0.1)"
                    duration={88}>
                    <div className='welcomeMEighth'/>
                </Tween>

                {/* This part is 'M' second */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '120px', y: '154px',  opacity:1}} 
                    repeat={2}
                    stagger={8.8} 
                    ease="elastic.out(1, 0.1)"
                    duration={89}>
                    <div className='welcomeMNineth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '125px', y: '162px',  opacity:1}} 
                    repeat={2}
                    stagger={8.9} 
                    ease="elastic.out(1, 0.1)"
                    duration={90}>
                    <div className='welcomeMTenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '130px', y: '170px',  opacity:1}} 
                    repeat={2}
                    stagger={9.0} 
                    ease="elastic.out(1, 0.1)"
                    duration={91}>
                    <div className='welcomeMEleventh'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '135px', y: '127px',  opacity:1}} 
                    repeat={2}
                    stagger={9.1} 
                    ease="elastic.out(1, 0.1)"
                    duration={92}>
                    <div className='welcomeMTwelfth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '138px', y: '83px',  opacity:1}} 
                    repeat={2}
                    stagger={9.2} 
                    ease="elastic.out(1, 0.1)"
                    duration={93}>
                    <div className='welcomeMThirteenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '140px', y: '40px',  opacity:1}} 
                    repeat={2}
                    stagger={9.3} 
                    ease="elastic.out(1, 0.1)"
                    duration={94}>
                    <div className='welcomeMFourteenth'/>
                </Tween>

                {/* This part is 'M' third */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '150px', y: '-5px',  opacity:1}} 
                    repeat={2}
                    stagger={9.4} 
                    ease="elastic.out(1, 0.1)"
                    duration={95}>
                    <div className='welcomeMFifteenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '160px', y: '-15px',  opacity:1}} 
                    repeat={2}
                    stagger={9.5} 
                    ease="elastic.out(1, 0.1)"
                    duration={96}>
                    <div className='welcomeMSixteenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '165px', y: '15px',  opacity:1}} 
                    repeat={2}
                    stagger={9.6} 
                    ease="elastic.out(1, 0.1)"
                    duration={97}>
                    <div className='welcomeMSeventeenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '180px', y: '25px',  opacity:1}} 
                    repeat={2}
                    stagger={9.7} 
                    ease="elastic.out(1, 0.1)"
                    duration={98}>
                    <div className='welcomeMEightteenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '185px', y: '20px',  opacity:1}} 
                    repeat={2}
                    stagger={9.8} 
                    ease="elastic.out(1, 0.1)"
                    duration={99}>
                    <div className='welcomeMNineteenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '190px', y: '30px',  opacity:1}} 
                    repeat={2}
                    stagger={9.9} 
                    ease="elastic.out(1, 0.1)"
                    duration={100}>
                    <div className='welcomeMTwenty'/>
                </Tween>

                {/* This part is 'M' fourth */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '200px', y: '35px',  opacity:1}} 
                    repeat={2}
                    stagger={10.0} 
                    ease="elastic.out(1, 0.1)"
                    duration={101}>
                    <div className='welcomeMTwentyOne'/>
                </Tween>

                {/* This part is 'E' first */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '250px', y: '30px',  opacity:1}} 
                    repeat={2}
                    stagger={10.1} 
                    ease="elastic.out(1, 0.1)"
                    duration={102}>
                    <div className='welcomeSEFirst'/>
                </Tween>
            
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '250px', y: '20px',  opacity:1}} 
                    repeat={2}
                    stagger={10.2} 
                    ease="elastic.out(1, 0.1)"
                    duration={103}>
                    <div className='welcomeSESecond'/>
                </Tween>
            
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '250px', y: '10px',  opacity:1}} 
                    repeat={2}
                    stagger={10.3} 
                    ease="elastic.out(1, 0.1)"
                    duration={104}>
                    <div className='welcomeSEThird'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '250px', y: '-10px',  opacity:1}} 
                    repeat={2}
                    stagger={10.4} 
                    ease="elastic.out(1, 0.1)"
                    duration={105}>
                    <div className='welcomeSEFourth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '250px', y: '-40px',  opacity:1}} 
                    repeat={2}
                    stagger={10.5} 
                    ease="elastic.out(1, 0.1)"
                    duration={106}>
                    <div className='welcomeSEFifth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '250px', y: '-70px',  opacity:1}} 
                    repeat={2}
                    stagger={10.6} 
                    ease="elastic.out(1, 0.1)"
                    duration={107}>
                    <div className='welcomeSESixth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '250px', y: '-100px',  opacity:1}} 
                    repeat={2}
                    stagger={10.7} 
                    ease="elastic.out(1, 0.1)"
                    duration={108}>
                    <div className='welcomeSESeventh'/>
                </Tween>

                {/* This part is 'E' second */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '250px', y: '-10px',  opacity:1}} 
                    repeat={2}
                    stagger={10.8} 
                    ease="elastic.out(1, 0.1)"
                    duration={109}>
                    <div className='welcomeSEEighth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '260px', y: '-10px',  opacity:1}} 
                    repeat={2}
                    stagger={10.9} 
                    ease="elastic.out(1, 0.1)"
                    duration={110}>
                    <div className='welcomeSENineth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '270px', y: '-10px',  opacity:1}} 
                    repeat={2}
                    stagger={11.0} 
                    ease="elastic.out(1, 0.1)"
                    duration={111}>
                    <div className='welcomeSETenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '280px', y: '-10px',  opacity:1}} 
                    repeat={2}
                    stagger={11.1} 
                    ease="elastic.out(1, 0.1)"
                    duration={112}>
                    <div className='welcomeSEEleventh'/>
                </Tween>

                {/* This part is 'E' third */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '250px', y: '-100px',  opacity:1}} 
                    repeat={2}
                    stagger={11.2} 
                    ease="elastic.out(1, 0.1)"
                    duration={113}>
                    <div className='welcomeSETwelfth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '260px', y: '-100px',  opacity:1}} 
                    repeat={2}
                    stagger={11.3} 
                    ease="elastic.out(1, 0.1)"
                    duration={114}>
                    <div className='welcomeSEThirteenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '270px', y: '-100px',  opacity:1}} 
                    repeat={2}
                    stagger={11.4} 
                    ease="elastic.out(1, 0.1)"
                    duration={115}>
                    <div className='welcomeSEFourteenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '280px', y: '-100px',  opacity:1}} 
                    repeat={2}
                    stagger={11.5} 
                    ease="elastic.out(1, 0.1)"
                    duration={116}>
                    <div className='welcomeSEFifteenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '290px', y: '-100px',  opacity:1}} 
                    repeat={2}
                    stagger={11.6} 
                    ease="elastic.out(1, 0.1)"
                    duration={117}>
                    <div className='welcomeSESixteenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '300px', y: '-100px',  opacity:1}} 
                    repeat={2}
                    stagger={11.7} 
                    ease="elastic.out(1, 0.1)"
                    duration={118}>
                    <div className='welcomeSESeventeenth'/>
                </Tween>

                {/* This part is 'E' fourth */}
                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '250px', y: '30px',  opacity:1}} 
                    repeat={2}
                    stagger={11.8} 
                    ease="elastic.out(1, 0.1)"
                    duration={119}>
                    <div className='welcomeSEEightteenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '260px', y: '30px',  opacity:1}} 
                    repeat={2}
                    stagger={11.9} 
                    ease="elastic.out(1, 0.1)"
                    duration={120}>
                    <div className='welcomeSENineteenth'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '270px', y: '30px',  opacity:1}} 
                    repeat={2}
                    stagger={12.0} 
                    ease="elastic.out(1, 0.1)"
                    duration={121}>
                    <div className='welcomeSETwenty'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '280px', y: '30px',  opacity:1}} 
                    repeat={2}
                    stagger={12.1} 
                    ease="elastic.out(1, 0.1)"
                    duration={122}>
                    <div className='welcomeSETwentyOne'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '290px', y: '30px',  opacity:1}} 
                    repeat={2}
                    stagger={12.2} 
                    ease="elastic.out(1, 0.1)"
                    duration={123}>
                    <div className='welcomeSETwentyTwo'/>
                </Tween>

                <Tween 
                    from={{x: '150px', opacity: 0}}
                    to={{x: '300px', y: '30px',  opacity:1}} 
                    repeat={2}
                    stagger={12.3} 
                    ease="elastic.out(1, 0.1)"
                    duration={124}>
                    <div className='welcomeSETwentyThree'/>
                </Tween>
            </div>
        )
    }
}

export default Welcome

下面是WordsDanceStyle.css 文件

// WordsDanceStyle.css 文件

/* This part is 'W' first */
.welcomeOne {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: 100px;
    margin-bottom: 1px;
}

.welcomeTwo {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: 10px;
    margin-bottom: 1px;
}

.welcomeThree {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: 10px;
    margin-bottom: 1px;
}

.welcomeFour {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: 10px;
    margin-bottom: 1px;
}

.welcomeFourOne {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: 10px;
    margin-bottom: 1px;
}

/* This part is 'W' second */
.welcomeFive {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -40px;
    margin-left: 5px;
    margin-bottom: 1px;
}

.welcomeSix {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -40px;
    margin-left: 5px;
    margin-bottom: 1px;
}

.welcomeSeven {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -40px;
    margin-left: 5px;
    margin-bottom: 1px;
}

/* This part is 'W' third */
.welcomeEight {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 1px;
}

.welcomeNine {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 1px;
}

.welcomeTen {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 1px;
}

/* This part is 'W' four */
.welcomeEleven {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -40px;
    margin-left: 15px;
    margin-bottom: 1px;
}

.welcomeTwelve {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -40px;
    margin-left: 15px;
    margin-bottom: 1px;
}

.welcomeThirteen {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -40px;
    margin-left: 15px;
    margin-bottom: 1px;
}

.welcomeThirteenOne {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -40px;
    margin-left: 25px;
    margin-bottom: 1px;
}

.welcomeThirteenTwo {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -40px;
    margin-left: 34px;
    margin-bottom: 1px;
}

.welcomeThirteenThree {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -40px;
    margin-left: 44px;
    margin-bottom: 1px;
}

/* This part is 'E' first  */
.welcomeEOne {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -18px;
    margin-left: 30px;
    margin-bottom: 1px;
}

.welcomeETwo {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -15px;
    margin-left: 45px;
    margin-bottom: 1px;
}

.welcomeEThree {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -15px;
    margin-left: 60px;
    margin-bottom: 1px;
}

.welcomeEFour {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -15px;
    margin-left: 75px;
    margin-bottom: 1px;
}

.welcomeEFive {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -15px;
    margin-left: 90px;
    margin-bottom: 1px;
}

/* This part is 'E' second */
.welcomeESix {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -5px;
    margin-left: 30px;
    margin-bottom: 10px;
}

.welcomeESeven {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: 5px;
    margin-left: 30px;
    margin-bottom: 10px;
}

.welcomeEEight {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: 5px;
    margin-left: 30px;
    margin-bottom: 10px;
}

.welcomeENine {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -5px;
    margin-left: 30px;
    margin-bottom: 10px;
}

/* This part is 'E' third */
.welcomeETen {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -70px;
    margin-left: 45px;
    margin-bottom: 10px;
}

.welcomeEEleven {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -25px;
    margin-left: 60px;
    margin-bottom: 10px;
}

.welcomeETwelve {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -25px;
    margin-left: 75px;
    margin-bottom: 10px;
}

/* This part is 'E' fourth  */
.welcomeEThirteen {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: 30px;
    margin-left: 45px;
    margin-bottom: 10px;
}

.welcomeEFourteen {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -25px;
    margin-left: 60px;
    margin-bottom: 10px;
}

.welcomeEFifteen {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -25px;
    margin-left: 75px;
    margin-bottom: 10px;
}

.welcomeESixteen {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -25px;
    margin-left: 90px;
    margin-bottom: 10px;
}

/* This part is 'L' first  */
.welcomeLFirst {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -105px;
    margin-left: 160px;
    margin-bottom: 10px;
}

.welcomeLSecond {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -10px;
    margin-left: 160px;
    margin-bottom: 10px;
}

.welcomeLThird {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -10px;
    margin-left: 160px;
    margin-bottom: 10px;
}

.welcomeLFourth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -10px;
    margin-left: 160px;
    margin-bottom: 10px;
}

.welcomeLFifth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: 0px;
    margin-left: 160px;
    margin-bottom: 10px;
}

/* This part is 'L' second */
.welcomeLSixth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -25px;
    margin-left: 175px;
    margin-bottom: 10px;
}

.welcomeLSeventh {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -25px;
    margin-left: 190px;
    margin-bottom: 10px;
}

.welcomeLEighth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -25px;
    margin-left: 205px;
    margin-bottom: 10px;
}

.welcomeLNineth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -25px;
    margin-left: 220px;
    margin-bottom: 10px;
}

/* This part is 'C' first */
.welcomeCFirst {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -25px;
    margin-left: 220px;
    margin-bottom: 10px;
}

.welcomeCSecond {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -35px;
    margin-left: 240px;
    margin-bottom: 10px;
}

.welcomeCThird {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -35px;
    margin-left: 255px;
    margin-bottom: 13px;
}

.welcomeCFourth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -30px;
    margin-left: 279px;
    margin-bottom: 14px;
}

.welcomeCFifth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -30px;
    margin-left: 310px;
    margin-bottom: 14px;
}

.welcomeCSixth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -28px;
    margin-left: 340px;
    margin-bottom: 14px;
}

.welcomeCSeventh {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -29px;
    margin-left: 369px;
    margin-bottom: 14px;
}

.welcomeCEighth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -29px;
    margin-left: 395px;
    margin-bottom: 14px;
}

.welcomeCNineth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -28px;
    margin-left: 420px;
    margin-bottom: 14px;
}

/* This part is 'C' second */
.welcomeCTenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -5px;
    margin-left: 240px;
    margin-bottom: 14px;
}

.welcomeCEleventh {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -10px;
    margin-left: 255px;
    margin-bottom: 14px;
}

.welcomeCTwelfth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -10px;
    margin-left: 270px;
    margin-bottom: 14px;
}

.welcomeCThirteenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -15px;
    margin-left: 290px;
    margin-bottom: 14px;
}

.welcomeCFourteenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -28px;
    margin-left: 315px;
    margin-bottom: 14px;
}

.welcomeCFifteenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -28px;
    margin-left: 340px;
    margin-bottom: 14px;
}

.welcomeCSixteenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -28px;
    margin-left: 365px;
    margin-bottom: 14px;
}

.welcomeCSeventeenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -28px;
    margin-left: 390px;
    margin-bottom: 14px;
}

/* This part is 'O' first  */
.welcomeOFirst {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -90px;
    margin-left: 400px;
    margin-bottom: 14px;
}

.welcomeOSecond {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -10px;
    margin-left: 400px;
    margin-bottom: 14px;
}

.welcomeOThird {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -9px;
    margin-left: 400px;
    margin-bottom: 14px;
}

.welcomeOFourth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -14px;
    margin-left: 413px;
    margin-bottom: 14px;
}

/* This part is 'O' second */
.welcomeOFifth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -28px;
    margin-left: 427px;
    margin-bottom: 14px;
}

.welcomeOSixth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -29px;
    margin-left: 441px;
    margin-bottom: 14px;
}

.welcomeOSeventh {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -29px;
    margin-left: 454px;
    margin-bottom: 14px;
}

.welcomeOEighth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -29px;
    margin-left: 461px;
    margin-bottom: 14px;
}

/* This part is 'O' third */
.welcomeONineth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -44px;
    margin-left: 468px;
    margin-bottom: 14px;
}

.welcomeOTenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -45px;
    margin-left: 468px;
    margin-bottom: 14px;
}

.welcomeOEleventh {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -50px;
    margin-left: 468px;
    margin-bottom: 14px;
}

/* This part is 'O' fourth */
.welcomeOTwelfth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -57px;
    margin-left: 468px;
    margin-bottom: 14px;
}

.welcomeOThirteenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -58px;
    margin-left: 468px;
    margin-bottom: 14px;
}

.welcomeOFourteenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -49px;
    margin-left: 468px;
    margin-bottom: 14px;
}

/* This part is 'O' fifth */
.welcomeOFifteenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -30px;
    margin-left: 460px;
    margin-bottom: 14px;
}

.welcomeOSixteenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -29px;
    margin-left: 452px;
    margin-bottom: 14px;
}

.welcomeOSeventeenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -29px;
    margin-left: 445px;
    margin-bottom: 14px;
}

.welcomeOEightteenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -29px;
    margin-left: 440px;
    margin-bottom: 14px;
}

.welcomeONineteenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -29px;
    margin-left: 440px;
    margin-bottom: 14px;
}

/* This part is 'O' sixth */
.welcomeOTwenty {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -15px;
    margin-left: 440px;
    margin-bottom: 14px;
}

/* This part is 'M' first  */
.welcomeMFirst {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: 90px;
    margin-left: 500px;
    margin-bottom: 14px;
}

.welcomeMSecond {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -67px;
    margin-left: 500px;
    margin-bottom: 10px;
}

.welcomeMThird {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -42px;
    margin-left: 505px;
    margin-bottom: 10px;
}

.welcomeMFourth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -42px;
    margin-left: 510px;
    margin-bottom: 10px;
}

.welcomeMFifth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -42px;
    margin-left: 515px;
    margin-bottom: 10px;
}

.welcomeMSixth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -42px;
    margin-left: 520px;
    margin-bottom: 10px;
}

.welcomeMSeventh {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -42px;
    margin-left: 525px;
    margin-bottom: 10px;
}

.welcomeMEighth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -42px;
    margin-left: 533px;
    margin-bottom: 10px;
}

/* This part is 'M' second */
.welcomeMNineth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -7px;
    margin-left: 545px;
    margin-bottom: 10px;
}

.welcomeMTenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -7px;
    margin-left: 550px;
    margin-bottom: 10px;
}

.welcomeMEleventh {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -7px;
    margin-left: 557px;
    margin-bottom: 10px;
}

.welcomeMTwelfth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -7px;
    margin-left: 564px;
    margin-bottom: 10px;
}

.welcomeMThirteenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -7px;
    margin-left: 570px;
    margin-bottom: 10px;
}

.welcomeMFourteenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -7px;
    margin-left: 578px;
    margin-bottom: 10px;
}

/* This part is 'M' third */
.welcomeMFifteenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -7px;
    margin-left: 576px;
    margin-bottom: 10px;
}

.welcomeMSixteenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -43px;
    margin-left: 578px;
    margin-bottom: 10px;
}

.welcomeMSeventeenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -26px;
    margin-left: 590px;
    margin-bottom: 10px;
}

.welcomeMEightteenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -8px;
    margin-left: 585px;
    margin-bottom: 10px;
}

.welcomeMNineteenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: 18px;
    margin-left: 588px;
    margin-bottom: 10px;
}

.welcomeMTwenty {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -10px;
    margin-left: 594px;
    margin-bottom: 10px;
}

/* This part is 'M' fourth */
.welcomeMTwentyOne {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -7px;
    margin-left: 594px;
    margin-bottom: 10px;
}

/* This part is 'E' first */
.welcomeSEFirst {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -18px;
    margin-left: 594px;
    margin-bottom: 10px;
}

.welcomeSESecond {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -39px;
    margin-left: 594px;
    margin-bottom: 10px;
}

.welcomeSEThird {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -40px;
    margin-left: 594px;
    margin-bottom: 10px;
}

.welcomeSEFourth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -30px;
    margin-left: 594px;
    margin-bottom: 10px;
}

.welcomeSEFifth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -20px;
    margin-left: 594px;
    margin-bottom: 10px;
}

.welcomeSESixth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -20px;
    margin-left: 594px;
    margin-bottom: 10px;
}

.welcomeSESeventh {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -20px;
    margin-left: 594px;
    margin-bottom: 10px;
}

/* This part is 'E' second */
.welcomeSEEighth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -39px;
    margin-left: 615px;
    margin-bottom: 10px;
}

.welcomeSENineth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -25px;
    margin-left: 625px;
    margin-bottom: 10px;
}

.welcomeSETenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -25px;
    margin-left: 635px;
    margin-bottom: 10px;
}

.welcomeSEEleventh {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -25px;
    margin-left: 645px;
    margin-bottom: 10px;
}

/* This part is 'E' third */
.welcomeSETwelfth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -11px;
    margin-left: 615px;
    margin-bottom: 10px;
}

.welcomeSEThirteenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -25px;
    margin-left: 625px;
    margin-bottom: 10px;
}

.welcomeSEFourteenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -25px;
    margin-left: 635px;
    margin-bottom: 10px;
}

.welcomeSEFifteenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -25px;
    margin-left: 645px;
    margin-bottom: 10px;
}

.welcomeSESixteenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -25px;
    margin-left: 655px;
    margin-bottom: 10px;
}

.welcomeSESeventeenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -25px;
    margin-left: 665px;
    margin-bottom: 10px;
}

/* This part is 'E' fourth */
.welcomeSEEightteenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -5px;
    margin-left: 615px;
    margin-bottom: 10px;
}

.welcomeSENineteenth {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -25px;
    margin-left: 625px;
    margin-bottom: 10px;
}

.welcomeSETwenty {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -25px;
    margin-left: 635px;
    margin-bottom: 10px;
}

.welcomeSETwentyOne {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -25px;
    margin-left: 645px;
    margin-bottom: 10px;
}

.welcomeSETwentyTwo {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -25px;
    margin-left: 655px;
    margin-bottom: 10px;
}

.welcomeSETwentyThree {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin-top: -25px;
    margin-left: 665px;
    margin-bottom: 10px;
}

最后是App.js 文件

// App.js 文件

import React from 'react';
import './App.css';
import WordsDance from './WordsDance'

function App() {
  return (
    <div className="App">
      <WordsDance/>
    </div>
  );
}

export default App;

可以根据上面的代码来修改成符合自己想要的结果，这里只是给个例子。

各位如果看到这里，就麻烦点个赞在走呗~
谢谢各位了~

CHNMSCS
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值