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
* {
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
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())


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