当前位置：网站首页>疫情期间闲来无事，我自制了一个按钮展示框特效来展示我的博客
疫情期间闲来无事，我自制了一个按钮展示框特效来展示我的博客
2022-08-08 18:35:00 【上进小菜猪】
一.前言
这几天博主这的疫情比较严重，小区都封了，在家闲来无事，作为一个后端程序员的我，前端技术菜的一批，但是最近有写一个个人技术，博客情况和项目介绍的前端展示特效，让别人可以快速的了解我，对于前端知识之前也接触过一些基础的技术栈，勇敢的我决定还是要尝试一下，对于按钮展示框，我自己从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>
边栏推荐
- 第4讲：SQL语句之DDL类型的数据库定义语言
- Numpy函数、模块、类列表
- ABAP 报表中如何给报表的输入参数增添 F4 Value Help
- MogDB study notes - starting from 0
- 行政区划代码(道路要素)
- 响应式pbootcms模板建筑装饰类网站
- HCIP第十三天作业——综合实验
- Geometric g6 will carry harmonyos system, a comprehensive upgrade competitiveness of products
- Task-Driven Super Resolution: Object Detection in Low-resolution Images
- LeetCode：每日一题【第二周】
猜你喜欢
随机推荐
el-tree设置单选，点击完成后收起
run fscript with lua
卡通渲染的历史
openEuler资源利用率提升之道02：典型应用下的效果
连接工具和idea能查询出数据库数据，项目中查不到数据库数据：解决办法
torchvision.transforms
2021年9月电子学会图形化一级编程题解析含答案：无奈的Jaime
关于求最小公倍数的三种常用方法
Is there any function in MAXCOMPUTE SQL to judge whether the string is a number?
请问在MAXCOMPUTE SQL 里有没有函数判断string 是否为数字？
How to add F4 Value Help to the input parameters of the report in the ABAP report
OpenSSH生成的私钥如何在putty中使用？
uniapp父组件使用prop将异步的数据传给子组件
Open Office XML 格式中的 Style 设计原理
01. Preface
Fortinet全新云原生保护产品上线亚马逊云科技平台
数据库学习之库的操作
ORACLE子查询 导致无法谓词推入的研究
CAD进阶练习（二）
OpenInfra Days China 2022即将开启，与 openEuler 共话开源技术