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

我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！

一.前言

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

二.想法设计/实现过程

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

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

三.基本样式

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

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

运行截图如下：

3.2 定义按钮

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

效果以及代码如下：

3.3 分栏格子效果

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

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

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";
}

复制代码

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