最近在玩一個叫Baba is you的游戲，很羨慕里面的一個轉場特效，所以試著做了一下。主要使用了JS和CSS，特效主要是用CSS實現的。
HTML代碼
|
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>開始導航</title> <link rel="stylesheet" href="style.css" > </head> <body> <div class="text"> <p><a id="bottom">點擊進入</a></p> </div> </body> <script type="text/javascript">//執行代碼window.onload=function(){ var bottom=document.getElementById("bottom"); bottom.onclick=function(){ action(); }}//獲取網頁長寬var windowWidth=window.screen.width;var windowHeight=window.screen.height;function createSnow(){ topblack(); leftblack(); bottomblack(); rightblack(); function topblack(){ //隨機創造1個div圓球 var left_random=Math.random()*windowWidth; var top_random=Math.random()*50; var div=document.createElement('div'); div.className='snow'; //定義縮放轉換 div.style.transform='scale('+(Math.random()*3)+')' //定義隨機位置，在頂部50像素之內 div.style.left=left_random+'px'; div.style.top=top_random+'px'; //放在html外面，先用overflow:hidden隱藏掉 div.style.marginTop="-250px"; document.body.appendChild(div); } function leftblack(){ var left_random=Math.random()*50; var top_random=Math.random()* windowHeight; var div=document.createElement('div'); div.className='snow'; div.style.transform='scale('+(Math.random()*2)+')' div.style.left= left_random+'px'; div.style.top=top_random+'px'; div.style.marginLeft="-250px"; document.body.appendChild(div); } function bottomblack(){ var left_random=Math.random()*windowWidth; var bottom_random=Math.random()*50; var div=document.createElement('div'); div.className='snow'; div.style.transform='scale('+(Math.random()*2)+')' div.style.left=left_random+'px'; div.style.bottom=bottom_random+'px'; div.style.marginBottom="-250px"; document.body.appendChild(div); } function rightblack(){ var right_random=Math.random()*50; var top_random=Math.random()* windowHeight; var div=document.createElement('div'); div.className='snow'; div.style.transform='scale('+(Math.random()*2)+')' div.style.right=right_random+'px'; div.style.top=top_random+'px'; div.style.marginRight="-250px"; document.body.appendChild(div); } }function setblack(){ //各自創造100個圓球隨機放在HTML頂部、底部、左右邊，各自隱藏。 for(var i=0;i<100;i++){ createSnow() } }//清除使用過后的云層與文字function clearsnow(){ var snow=document.querySelectorAll(".snow"); var font=document.querySelector(".Fontarea"); for(var i=0;i<snow.length;i++){ document.body.removeChild(snow[i]); } document.body.removeChild(font);}//只是一個習慣，定義一個創建div的模板函數。你們可以用自己的方式。function font(oCss){ var oBox=document.createElement("p"); oCss.parent.appendChild(oBox); oBox.innerHTML=oCss.p; oBox.className=oCss.c; return oBox;}function create(oCss){ var oBox=document.createElement("div"); oCss.parent.appendChild(oBox); oBox.style.width=oCss.w+"px"; oBox.style.height=oCss.h+"px"; oBox.style.position=oCss.p; oBox.style.left=oCss.l+"px"; oBox.style.top=oCss.t+"px"; oBox.style.backgroundSize="100%"; return oBox;}//創建浮現的文字function winthegame(){var Fontarea=create({ "w":500, "h":600, "p":"absolute", "parent":document.body, "l":"400", "t":"0"});Fontarea.style.marginTop="200px";Fontarea.className="Fontarea";Fontarea.style.zIndex="31";var titlep=font({ "parent":Fontarea,"p":"CONGRATULATION!","c":"font7"});}//執行創建云層與文字，封裝起來是因為，如果文字出現多個不同的，就用不同的函數封裝不同的場合。function wintime(){ winthegame(); setblack();}//執行創建與清除，用setTimeout()來延遲清除。function action(){ wintime();setTimeout(clearsnow,5000);} </script></html> |
css代碼
|
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
|
body{ background-size: 100%; overflow: hidden; background-color: #000;}.text{ color: white; text-align: center; text-transform: uppercase; margin: 300px 0; font-size: 22px;}.text a{color:white; text-decoration:none; cursor: pointer; }.snow{ background: #15181f; position: absolute; width: 100px; height: 100px; border-radius: 50%; z-index: 30; animation: bganimation 5s 1;}.font7{ color:white; text-align: center; font-size: 60px;}.Fontarea{ opacity:0; animation: beganfont 4s 1;}@keyframes bganimation { 0%{ width: 100px; height: 100px; } 50%{ width: 500px; height: 500px; } 100%{ width: 100px; height: 100px; }}@keyframes beganfont { 0%{ opacity:0; } 50%{ opacity:1; } 100%{ opacity:0; }} |
這是效果圖，點擊文字會執行效果一次。
效果JS的解析都寫在注釋里了，CSS就是使用@keyframes來實現效果，也不是什么難懂的。
這種效果對于用于展示開場應該足夠了，主要可以用來炫耀之類的，JS的代碼或許比較粗糙，是從某個朋友的雪花特效那copy來改的。主要是用來做一個期末項目的，這個項目某些東西我以后也會慢慢總結的。
那么，就這樣，可能我寫的特效會跟別人的撞車，請多多包涵。如果感覺不是什么高大上的東西，也請多多包涵。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/weixin_50759039/article/details/112056597
