【没用前端之二】七龙珠里的悟空也能做成页码?

1,143 阅读2分钟

这是我参与更文挑战的第14天,活动详情查看: 更文挑战 !

👽 概论

上次实现了个带点切换动画的注册登录界面,有人说,整这么花里胡哨有啥用呀😛😛。嘿我不服了,那个明明还是有点用的嘛😊😊。所以我这次就专门做个看起来不错,实际项目里根本不会用的:悟空乘云页码!🤣🤣🤣

先看效果图:

动画.gif

tips:【没用前端系列之一】请看这里

👽 素材准备

网上随便找张符合我们需求的图,比如下边这张:

1.png

再随便把主体抠出来:

2.png

缺个尾巴?随便画个,顺便再调整调整角度(大家别在意细节,毕竟这方面咱也不是专业的):

3.png

素材至此就准备完成啦~

👽 页面布局

趁悟空还没飞走,我们赶紧把他绑定到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>

此阶段效果如下:

image.png

👽 样式美化

这效果也太单调了,考虑把页码做成七龙珠样式:


      .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);
      }

大致效果就出来啦:

image.png

👽 动画过渡

这一阶段就很简单了吧:通过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>

最终效果就出来咯:

动画.gif

👽 结语

🤔🤔其实我觉得前端并不只是一份工作而已,更是一种爱好。所以呢,有时候做一些东西也不止是出于工作需要,而是因为自己感觉好玩,所以才去尝试去探索。不然如果只是一昧码代码的话,多枯燥啊。

这个页码效果其实还有个问题:页码回退的时候悟空是倒退的,显得有些生硬。我这里就只抛砖引玉,剩下的问题就交给聪明的大家继续探索吧!