疫情期间闲来无事，我自制了一个按钮展示框特效来展示我的博客

文章目录

一.前言
二.想法设计/实现过程
三.基本样式

一.前言

这几天博主这的疫情比较严重，小区都封了，在家闲来无事，作为一个后端程序员的我，前端技术菜的一批，但是最近有写一个个人技术，博客情况和项目介绍的前端展示特效，让别人可以快速的了解我，对于前端知识之前也接触过一些基础的技术栈，勇敢的我决定还是要尝试一下，对于按钮展示框，我自己从0到1的写了一个，用到的技术就是基础的html+css+JavaScript+jqurey。
效果图如下：
在这里插入图片描述

在这里插入图片描述

二.想法设计/实现过程

秉持着最少空间可以展示更多内容的原则，我初步的想法是，设计三个按钮，点击不同的按钮会显示不同的内容。
1，介绍我的博客粉丝，浏览量。
2，介绍我做过的项目。
3，展示我现有的技术栈。

所以，我前期的设计图如下：

在这里插入图片描述

三.基本样式

3.1 先定义盒子模型：（最外面的大框）

代码如下，先设计一个大的盒子，为了好看，我们可以设计一个半角过渡：
html：

css：

.transmit {
				width: 100%;
				height: 600px;
				background-color: #7174a6;
				position: relative;
				border-radius: 0px 120px 0px 0px;
			}
1
2
3
4
5
6
7

运行截图如下：
在这里插入图片描述

3.2 定义按钮

已美观为原则，我们在外面的大盒子上面写下一排————ABOUT ME————，
下面分别设计三个按钮，目的是为了点击不同的按钮来显示不同的内容。
分别为：1.MCN矩阵 2.开源世界 3.技术栈

效果以及代码如下：
HTML代码段如下：



	
		
		
		
	
	
		
			————ABOUT ME————
			
				MCN矩阵
				开源世界
				技术栈

css代码如下:

.transmit {
				width: 100%;
				height: 600px;
				background-color: #7174a6;
				position: relative;
				border-radius: 0px 120px 0px 0px;
			}

.aboutme {
				position: absolute;
				color: #FFFFFF;
				font-size: 28px;
				font-weight: 600;
				top: 30px;
				left: 50%;
				margin-left: -213px;
			}

  .buttonx span:hover {
				color: rgba(11, 113, 214, 0.9);
				background-color: aliceblue;
			}
			
			.buttonx span {
				margin-right: 20px;
				border-radius: 20px;
				padding: 15px;
				font-size: 25px;
				background-color: rgba(11, 113, 214, 0.9);
				color: aliceblue;
			}
      	.buttonx {
				position: absolute;
				left: 50%;
				margin-left: -230px;
				top: 105px;
				cursor: pointer;
			}
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

在这里插入图片描述

3.3 分栏格子效果

因为设计到我的博客平台和开源项目较多，我在大盒子下面设计了若干个小盒子，为了美观，我还写了鼠标悬浮效果。

HTML代码和CSS代码段如下：



	
		
		
			
			

	
	
		
		
			————ABOUT ME————
			
				MCN矩阵
				开源世界
				技术栈
			
			
				
					
						
							
							
								题小满_非原生开发前后端分离的移动端应用
前后端均已开源
							
						
					
					
						
							
							
								IMUSTCTF_前后端一体开发
保密项目，暂不能开源
							
						
					
					
						
							
							
								遇见青山_包头政府活动网站
部分开源
							
						
					
					
						
							
							
								gowork.fit网站
后续逐步全开源
							
						
					
					
						
						
							后续敬请期待更多开源项目。

							github同步开源，点击进入我的github主页。
						
					
				
			

	

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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236

效果如下：非常的好看，大大的提升了与用户的友好性，鼠标悬浮会有选中过渡效果，非常的人性化。

在这里插入图片描述

3.4 JavaScript 控制效果

现在需要实现，点击不同的按钮来显示不同的内容，点击MCN矩阵显示，我的若干个博客，点击开源世界显示我的开源项目，点击技术栈，显示我的目前掌握的技术栈：
实现如下效果：

在这里插入图片描述

这里主要使用JavaScript控制器来控制。

window.onload = function() {
	show1();
	showtext1();
}

function show1() {
	document.getElementById("button1").style.display = "block";
	document.getElementById("button2").style.display = "none";
	document.getElementById("button3").style.display = "none";
};

function show2() {
	document.getElementById("button2").style.display = "block";
	document.getElementById("button1").style.display = "none";
	document.getElementById("button3").style.display = "none";
}

function show3() {
	document.getElementById("button3").style.display = "block";
	document.getElementById("button1").style.display = "none";
	document.getElementById("button2").style.display = "none";
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

值得注意的是，因为网页加载的顺序，我们需要在刚运行js语言执行show1()函数，让其他俩个的内容隐藏，只显示第一个按钮的内容。
效果如下: