当前位置：网站首页>疫情期间闲来无事，我自制了一个按钮展示框特效来展示我的博客
疫情期间闲来无事，我自制了一个按钮展示框特效来展示我的博客
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>
边栏推荐
- Open Office XML 格式中的 Style 设计原理
- 堆排序（Heap Sort）实现
- MySQL：Update高并发下变慢的案例及其涉及的特性
- 常用字符的编码
- 2021年9月电子学会图形化三级编程题解析含答案：计算平均分
- 性能问题从发现到优化一般思路
- 3D角色建模师和3D角色动画师哪个更有前景？哪个更适合小白入门？
- Leetcode 23.合并K个升序链表 链表归并合并
- JDBC最详讲解(快速入门)
- Excuse me, during the mongoshake synchronization process in the shake database, src_mongo hangs up, will the synchronization service not exit?
猜你喜欢
响应式pbootcms模板建筑装饰类网站
Task-Driven Super Resolution: Object Detection in Low-resolution Images
什么是Shell？从小白到入门你只差一个它
2022年6月电子学会考级试卷真题解析（含答案和所有文档下载）
MIMO雷达波束赋形
3D角色建模师和3D角色动画师哪个更有前景？哪个更适合小白入门？
啥？分库分表会带来读扩散问题？怎么解决？？？
OpenInfra Days China 2022即将开启，与 openEuler 共话开源技术
Learn about layered architecture & SOA architecture together
2022年美术生就业前景解析
随机推荐
uniapp parent component uses prop to pass asynchronous data to child components
How to add F4 Value Help to the input parameters of the report in the ABAP report
Architecture Design Fundamentals
This error is reported when the shake database is started. Is there a problem with the configuration?
“非洲之王”传音答复投资者提问：手机产品暂无计划进入中国
feign的性能优化、Feign的使用-最佳优化两种方案
LeetCode：每日一题【第二周】
flask基础知识：
Smobiler的复杂控件的由来与创造
OpenSSH生成的私钥如何在putty中使用？
Transsion Holdings: At present, there is no clear plan for the company's mobile phone products to enter the Chinese market
2022年美术生就业前景解析
2021年9月电子学会图形化二级编程题解析含答案：画正多边形
Shell脚本三剑客（grep、sed、awk）
ptorch
数据压缩和归档(二)、zipfile
架构设计基本原则
Laravel 5.8笔记
数据库学习之表的操作
JDBC最详讲解(快速入门)