By Romaopedro199

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom. In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.

Today, we are going to make a fancy Tap bar, and first look at the final result:

Then, the code code up!

HTML

<div class="container">
  <div class="bar">
    <div class="bar-item pre-active" onclick="changeActive(this)">
      <div class="bar-fluid"></div>
      <div class="drop"></div>
      <i class="far fa-calendar-alt"></i>
    </div>
    <div class="bar-item" onclick="changeActive(this)">
      <div class="bar-fluid"></div>
      <div class="drop"></div>
      <i class="far fa-sticky-note"></i>
    </div>
    <div class="bar-item" onclick="changeActive(this)">
      <div class="bar-fluid"></div>
      <div class="drop"></div>
      <i class="far fa-bell"></i>
    </div>
    <div class="bar-item" onclick="changeActive(this)">
      <div class="bar-fluid"></div>
      <div class="drop"></div>
      <i class="far fa-address-book"></i>
    </div>
  </div>
</div>
Copy the code

In HTML code, the “bar” class is the container for the click bar, and the “bar-item” class is the button that triggers the animation. Now proceed to code CSS.

CSS

* { margin: 0px; padding: 0px; box-sizing: border-box; } .container { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #fc5c65; } .bar { padding: 0px 10px; display: flex; align-items: center; background-color: #ffffff; border-radius: 10px 10px 20px 20px; box-shadow: 3px 3px 0px 0px rgb(235 59 90); } .bar .bar-item { position: relative; overflow: hidden; padding: 20px 25px; cursor: pointer; } .bar .bar-item i { z-index: 1; position: relative; color: #a4b0be; transition: all .3s ease-in-out; } .bar .bar-item.pre-active i { color: #fc5c65; } .bar .bar-item.active i { color: #fc5c65; animation: colour 1s ease-in-out; } .bar .bar-item.active .bar-fluid { position: absolute; top: 0px; left: 0px; background-color: #fc5c65; width: 100%; height: 0px; animation: fluid 1s ease-in-out; } .bar .bar-item.active .bar-fluid:before { content: ''; position: absolute; top: 0px; left: -50%; background-color: #ffffff; width: 110%; height: 400%; border-radius: 50%; } .bar .bar-item.active .bar-fluid:after { content: ''; position: absolute; top: 0px; right: -50%; background-color: #ffffff; width: 110%; height: 400%; border-radius: 50%; } .bar .bar-item.active .drop { position: absolute; Top: 2.5 px; Left: 30.5 px; background-color: #fc5c65; Width: 2.5 px; Height: 2.5 px; border-radius: 50%; animation: drop 1s ease-in-out; } @keyframes colour { 0% { color: #a4b0be; } 55% { color: #a4b0be; transform: scale(1); } 60% { color: #fc5c65; transform: scale(1); } 70% {transform: scale(1.1); } 80% { transform: scale(1); } } @keyframes fluid { 0% { height: 0px; } 30% { height: 10px; } 100% { height: 0px; }} @keyframes drop {20% {top: -2.5px; } 50% { top: 21px; } 51% {top: -2.5px; }}Copy the code

Digest slowly, don’t want to digest directly to be a CV engineer.

JavaScript

Online stories

Codepen. IO/romaopedro1…

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: dev. To/romaopedro1…

communication

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom.

In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.