This is the 14th day of my participation in Gwen Challenge.

Introduction to đŸ‘œ

The last implementation of a point switch animation registration login interface, someone said, the whole so what use 😛😛. Hey I refuse to accept, that obviously still have a bit of use 😊😊. So THIS time I specifically do a look good, the actual project will not use: Wukong by cloud page number! đŸ€Ł đŸ€Ł đŸ€Ł

First look at the renderings:

See here.

đŸ‘œ Materials

Find a picture online that fits our needs, like this one:

And then arbitrarily pick out the main body:

Missing a tail? Make a random drawing and adjust the Angle as you go (don’t worry about the details, I’m not a professional) :

The material is now ready to complete ~

đŸ‘œ Page Layout

Before Goku flies away, we quickly bind him to HTML. By the way, write out the general layout:

<! DOCTYPEhtml>
<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.5 s 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>
Copy the code

Effects at this stage are as follows:

đŸ‘œ style beautification

This effect is too monotonous. Consider making the page numbers dragon Balls:


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

Here is the general effect:

đŸ‘œ Animation transition

This stage is very simple: control Wukong’s left dynamically through JS:


    <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>
Copy the code

Here’s the final result:

đŸ‘œ epilogue

đŸ€”đŸ€” in fact, I think the front end is not just a job, but also a hobby. So, sometimes you do things not just out of work, but because it’s fun for you, so you try to explore. Otherwise, if it is just a simple code, how boring ah.

Effect of this page number still has a problem actually: when page number is retreated, wu empty is regressive, appear some curt. Here I just throw out a brick to introduce jade, the rest of the problem to the smart people continue to explore it!Copy the code