上一篇的炫酷小圈圈，获得了不错的阅读量，博主就继续提供利用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;
可以根据上面的代码来修改成符合自己想要的结果，这里只是给个例子。
各位如果看到这里，就麻烦点个赞在走呗~
谢谢各位了~