1
2
3
4
<body>
	<div class="box">
	</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
* {
			padding: 0;
			margin: 0;
		}

		html,
		body {
			width: 100%;
			height: 100%;
			overflow: hidden;
			text-align: center;
		}

		body {
			/* padding-top: 200px; */
			background: black;
		}

		.box {
			/* border:1px green solid; */
			transition: .1s;
			display: inline-block;
			position: relative;
		}

		.box h1 {
			font-size: 40px;
			font-weight: bolder;
			text-shadow: 1px 1px 5px rgba(255, 255, 255, .5);
		}

		.box h1.changed {
			font-size: 20px;
		}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
document.body.style.paddingTop = window.innerHeight/2+'px'
let count = 0;
	let str = '你要克服懒惰，你要克服游手好闲，你要克服漫长的白日梦！你要克服一蹴而就的妄想，你要独立生长在这世上，不寻找不依靠你要坚强振作自立不能软弱，逃避，害怕，不要沉溺在消极负面得情绪里，要正面阳光得对待生活和爱你的人。不为别人，只为做一个连自己都羡慕的人。不是有了钱，才去把事情做好。而是把事情做好了，钱才会来！不要羡慕别人，成果都是人家拼命得来的'
	let others = str.split(/[\。\！]/)
	let fontArr = []

	others.forEach(item=>{
		fontArr.push(item.split('，'))
    if(fontArr.length===others.length)hhc(count++,fontArr.shift());
	})

	function hhc(num,arr) {
		let box = document.getElementsByClassName('box')[0]
		
		let timer = setInterval(t => {
			if (arr.length==0) {
				clearInterval(timer);
        if(fontArr.length==0)return;
            box.style.transform = num % 2 == 0?'rotate(90deg)':'rotate(-90deg)'

				let offsetTop = parseFloat(getComputedStyle(box, null).marginTop)

				box.style.marginTop = offsetTop - 52 + 'px'
				box.style.zIndex = count;

				setTimeout(t => {

					//加载另一个数组的文字
					addNewFont(num)
				}, 200)

				return;
			}

			boxMove(box)//位置移动
			addFont(box,arr)//添加新文字

			if (arr.length == 1) {
				if (num % 2 == 0) {
					box.style.transformOrigin = 'right bottom'
				} else {
					box.style.transformOrigin = 'left bottom'
				}
			}
		}, 500)
	}
	//位置移动函数
	function boxMove(box) {

		let offsetTop = parseFloat(getComputedStyle(box, null).marginTop)
		box.style.marginTop = offsetTop - 26 + 'px'

		//改变上一个文字的大小和颜色
		let lastH1Length = document.querySelectorAll('body>.box>h1').length
		if (lastH1Length > 0) {
			let lastH1 = document.querySelectorAll('body>.box>h1')[lastH1Length - 1]
			lastH1.className = 'changed'
		}
	}
	//添加新文字函数
	function addFont(box,arr) {
		let colorArr = ['orange', 'red', 'white', 'green', 'yellow', 'purple']
		let newH1 = document.createElement('h1')
		newH1.innerHTML = arr.shift()
		let ranNum = (num = 1) => parseInt(Math.random() * num)
		newH1.style.color = colorArr[ranNum(colorArr.length)]
		box.appendChild(newH1)
	}
	//加载另一个数组的文字
	function addNewFont() {
		//出口
		if(fontArr.length==0)return;
		let box = document.querySelector('body>.box')

		let newBox = document.createElement('div')
		newBox.className = 'box'
		newBox.appendChild(box)
		document.body.appendChild(newBox)

		

		//递归
		hhc(count++,fontArr.shift())


	}

微信扫码即可关注公众号哟！