这是我参与更文挑战的第14天,活动详情查看: 更文挑战 !
👽 概论
上次实现了个带点切换动画的注册登录界面,有人说,整这么花里胡哨有啥用呀😛😛。嘿我不服了,那个明明还是有点用的嘛😊😊。所以我这次就专门做个看起来不错,实际项目里根本不会用的:悟空乘云页码!🤣🤣🤣
先看效果图:
tips:【没用前端系列之一】请看这里。
👽 素材准备
网上随便找张符合我们需求的图,比如下边这张:
再随便把主体抠出来:
缺个尾巴?随便画个,顺便再调整调整角度(大家别在意细节,毕竟这方面咱也不是专业的):
素材至此就准备完成啦~
👽 页面布局
趁悟空还没飞走,我们赶紧把他绑定到HTML里。顺带把大致布局写出来:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
display: flex;
justify-content: center;
align-items: center;
}
.pageBox {
position: relative;
height: 70px;
margin-top: 100px;
padding: 0 50px;
line-height: 70px;
border: 1px solid red;
}
.wukong {
position: absolute;
left: 58px;
top: 15px;
display: block;
width: 70px;
height: 50px;
transition: 0.5s ease-in-out;
background-image: url(./wukong.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.page {
display: inline-flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
margin-right: 30px;
cursor: pointer;
}
.page:last-child {
margin-right: 0px;
}
.page span {
display: inline-block;
width: 17px;
height: 17px;
text-align: center;
line-height: 17px;
font-size: 12px;
}
</style>
</head>
<body>
<div class="pageBox">
<i class="wukong"></i>
<div class="page"><span>1</span></div>
<div class="page"><span>2</span></div>
<div class="page"><span>3</span></div>
<div class="page"><span>4</span></div>
<div class="page"><span>5</span></div>
</div>
</body>
</html>
此阶段效果如下:
👽 样式美化
这效果也太单调了,考虑把页码做成七龙珠样式:
.pageBox {
position: relative;
height: 70px;
margin-top: 100px;
padding: 0 50px;
line-height: 70px;
background-color: rgb(7, 100, 217);
}
···
.page span {
···
color: rgb(219, 19, 8);
background-color: rgb(211, 92, 6);
border-radius: 50%;
box-shadow: 0 0 3px rgb(255, 255, 255);
}
大致效果就出来啦:
👽 动画过渡
这一阶段就很简单了吧:通过js动态控制悟空的left即可:
<script>
const pages = document.querySelectorAll('.page');
const wukong = document.querySelector('.wukong');
pages.forEach((page, index) => {
page.onclick = () => {
wukong.style.left = `${index * 85 + 55}px`;
};
});
</script>
最终效果就出来咯:
👽 结语
🤔🤔其实我觉得前端并不只是一份工作而已,更是一种爱好。所以呢,有时候做一些东西也不止是出于工作需要,而是因为自己感觉好玩,所以才去尝试去探索。不然如果只是一昧码代码的话,多枯燥啊。
这个页码效果其实还有个问题:页码回退的时候悟空是倒退的,显得有些生硬。我这里就只抛砖引玉,剩下的问题就交给聪明的大家继续探索吧!