当前位置：网站首页>开源一夏 | 疫情期间闲来无事，我自制了一个按钮展示框特效来展示我的博客
开源一夏 | 疫情期间闲来无事，我自制了一个按钮展示框特效来展示我的博客
2022-08-08 17:12:00 【InfoQ】
一.前言
这几天博主这的疫情比较严重，小区都封了，在家闲来无事，作为一个后端程序员的我，前端技术菜的一批，但是最近有写一个个人技术，博客情况和项目介绍的前端展示特效，让别人可以快速的了解我，对于前端知识之前也接触过一些基础的技术栈，勇敢的我决定还是要尝试一下，对于按钮展示框，我自己从0到1的写了一个，用到的技术就是基础的html+css+JavaScript+jqurey。效果图如下：
二.想法设计/实现过程
秉持着最少空间可以展示更多内容的原则，我初步的想法是，设计三个按钮，点击不同的按钮会显示不同的内容。1，介绍我的博客粉丝，浏览量。2，介绍我做过的项目。3，展示我现有的技术栈。
所以，我前期的设计图如下：
三.基本样式
3.1 先定义盒子模型：（最外面的大框）
代码如下，先设计一个大的盒子，为了好看，我们可以设计一个半角过渡：html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="transmit">
</div>
</div>
</body>
</html>
css：
.transmit {
width: 100%;
height: 600px;
background-color: #7174a6;
position: relative;
border-radius: 0px 120px 0px 0px;
}
运行截图如下：
3.2 定义按钮
已美观为原则，我们在外面的大盒子上面写下一排————ABOUT ME————，下面分别设计三个按钮，目的是为了点击不同的按钮来显示不同的内容。分别为：1.MCN矩阵 2.开源世界 3.技术栈
效果以及代码如下：HTML代码段如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="transmit">
<div class="aboutme">————ABOUT ME————</div>
<div class="buttonx">
<span onclick="show1()">MCN矩阵</span>
<span onclick="show2()">开源世界</span>
<span onclick="show3()">技术栈</span>
</div>
</div>
</div>
</body>
</html>
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;
}
3.3 分栏格子效果
因为设计到我的博客平台和开源项目较多，我在大盒子下面设计了若干个小盒子，为了美观，我还写了鼠标悬浮效果。
HTML代码和CSS代码段如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/* 传递开始 */
.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 {
position: absolute;
left: 50%;
margin-left: -230px;
top: 105px;
cursor: pointer;
}
.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;
}
.textabout {
width: 900px;
height: 400px;
/* background-color: #008000; */
top: 165px;
left: 50%;
margin-left: -450px;
}
.textabout li {
background-color: rgba(255, 255, 255, 0.8);
width: 195px;
height: 195px;
list-style: none;
margin-right: 15px;
margin-bottom: 15px;
float: left;
border-radius: 30px;
}
/* 处理img大小不一问题 */
.textabout li img {
width: 190px;
/* max-width: 90%; */
}
.huawei {
top: 10px;
position: absolute;
}
.cto51,
.juejing,
.gowork {
left: 4px;
top: 20px;
position: absolute;
}
.textabout .zhihu {
position: absolute;
top: 20px;
left: 50px;
width: 100px;
}
.textabout .ali,
.gitee {
left: 4px;
width: 180px;
top: 20px;
position: absolute;
}
.textabout .infoq {
left: 15px;
width: 180px;
top: 20px;
position: absolute;
}
.textabout .tranimg {
position: absolute;
height: 100px;
/* background-color: #000000; */
}
.textabout {
position: absolute;
}
.textabout li span {
margin-top: 100px;
text-align: center;
display: block;
color: black;
font-size: 15px;
font-weight: 900;
}
.textabout li:hover {
background-color: rgba(255, 255, 255, 0.8);
width: 200px;
height: 200px;
list-style: none;
margin-right: 10px;
margin-bottom: 10px;
float: left;
border-radius: 30px;
color: red;
}
.textabout li:hover span {
color: #afb42b;
}
/* 技术栈 */
.textaboutx {
width: 900px;
height: 400px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 30px;
top: 165px;
left: 50%;
margin-left: -450px;
}
.b3title {
top: 10px;
position: absolute;
left: 50%;
font-size: 40px;
color: #00283a;
margin-left: -210px;
font-family: KaiTi;
}
.b3text {
font-size: 22px;
top: 60px;
position: absolute;
left: 5%;
font-family: STKaiti;
}
</style>
</head>
<body>
<!-- 传递开始 -->
<div class="transmit">
<div class="aboutme">————ABOUT ME————</div>
<div class="buttonx">
<span onclick="show1()">MCN矩阵</span>
<span onclick="show2()">开源世界</span>
<span onclick="show3()">技术栈</span>
</div>
<div id="button2" class="textabout">
<ul>
<a href="https://gitee.com/shangjinzhu/luck5" target="_blank">
<li>
<div class="tranimg"><img src="image/gitee.svg" class="gitee" /></div>
<span>
题小满_非原生开发前后端分离的移动端应用<br>前后端均已开源
</span>
</li>
</a>
<a href="#">
<li>
<div class="tranimg"><img src="image/gitee.svg" class="gitee" /></div>
<span>
IMUSTCTF_前后端一体开发<br>保密项目，暂不能开源
</span>
</li>
</a>
<a href="https://gitee.com/shangjinzhu/qingsan" target="_blank">
<li>
<div class="tranimg"><img src="image/gitee.svg" class="gitee" /></div>
<span>
遇见青山_包头政府活动网站<br>部分开源
</span>
</li>
</a>
<a href="https://gitee.com/shangjinzhu/qingsan" target="_blank">
<li>
<div class="tranimg"><img src="image/gitee.svg" class="gitee" /></div>
<span>
gowork.fit网站<br>后续逐步全开源
</span>
</li>
</a>
<li>
<div class="tranimg"><img src="image/giehub.png" class="gitee" /></div>
<span>
后续敬请期待更多开源项目。<br />
github同步开源，点击进入我的github主页。
</span>
</li>
</ul>
</div>
</body>
</html>
效果如下：非常的好看，大大的提升了与用户的友好性，鼠标悬浮会有选中过渡效果，非常的人性化。
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()函数，让其他俩个的内容隐藏，只显示第一个按钮的内容。效果如下:
<script >
show1();
window.onload = function() {
show1();
}
</script >
<script >
window.onload = function() {
show1();
}
show1();
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";
}
</script>
</body>
</html>
边栏推荐
猜你喜欢
![Acwing Week 63 [Unfinished]](/img/ad/aee803fddbba688366ca8f3e772764.png)
![[Paper Reading] RAL 2022: Receding Moving Object Segmentation in 3D LiDAR Data Using Sparse 4D Convolutions](/img/6c/2d8469b2113f6c23c5b75e6f6e479e.png)
随机推荐
vi编辑器命令
Qt——获取文件夹下所有子文件名称
4. S32K14X study notes: S32 Design Studio new and imported projects
B+树与B-树的区别
京东二面：高并发设计，都有哪些技术方案？
laravel - query builder 2
[Paper Reading] RAL 2022: Receding Moving Object Segmentation in 3D LiDAR Data Using Sparse 4D Convolutions
测试/开发程序员停滞不前，倦怠怎么办？突破各种失败和挫折......
synchronized加载static关键字前和普通方法前的区别？
LeetCode_Binary Tree_Medium_515. Find the maximum value in each tree row
【MySQL哪些字段适合建索引，哪些查询条件会导致索引失效】
Acwing第 63 场周赛【未完结】
L2-027 名人堂与代金券 (25 分)
Es的索引操作（代码中的基本操作）
[In-depth study of 4G/5G/6G topic-54]: L3 signaling control-3-segmentation of software functions and processes-signaling of CU-UP network elements
咸阳广发证券股票开户安全吗，需要准备什么证件
【CC3200AI 实验教程4】疯壳·AI语音人脸识别（会议记录仪/人脸打卡机）-GPIO
MySQL 表的增删查改
Tensorflow教程(三)——获取数据 feed 和 fetchn
目标检测、目标跟踪、图像分类最新进展