This is the 26th day of my participation in the August Text Challenge.More challenges in August

🐳 preface

  • I don’t know if you notice the moment when water drops fall.
  • Listen carefully, look carefully, every drop of water falling from the ripples are intentional.
  • One by one appear and disappear ripples like time seems to take away something, or left something, and it seems that everything has not changed, but feel more something, let a person can not help but want to order onepraise~ ~
  • All right, all kidding aside, let’s try making this ripple button.

🤽 came ️ ToDoList

  • A quiet good
  • Dragonfly water
  • The intermittent microwave

🚿 Just Do It

  • In fact, such an effect is nothing more than the middle button next to the two gradually larger shadow, and as time goes by, as the shadow area grows, it will gradually disappear.

🌱 all quiet

  • Let’s start with a calm lake, which is our button.
/** index.html **/
<div class="waterButton">
  <div class="good">
    <div class="good_btn" id="waterButton">
      <img src="./good.png" alt="">
    </div>
    <span id="water1"></span>
    <span id="water2"></span>
  </div>
</div>
Copy the code
  • We need one in the basic layoutdivWrap a like image to represent a button, and two morespanTag to indicate impending ripples, which will be used later.
/** button.css **/
.waterButton {
  height: 27rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.good {
  width: 6rem;
  height: 6rem;
  position: relative;
}
.good_btn {
  width: 6rem;
  height: 6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  z-index: 3;
  cursor: pointer;
  box-shadow:.4rem .4rem .8rem #c8d0e7, -.4rem -.4rem .8rem #fff;
}
img{
  width: 50%;
  height: 50%;
  z-index: 4;
}
Copy the code
  • It’s not good to have a single, uniform shadow on your button because you’re emulating it in water, so you can have a white shadow on top of your button and a gray shadow on top of your button. Here’s a website you can use to debug neumorphis.io if you need to make these shadows.

🍃 Dragonfly water

  • Because it’s a button we need a click event to simulate the sensation of water dripping into the lake.
  • The feeling of rippling water waves can actually be made into an animation, so that a button like element gradually scales to twice and then slowly disappears. We can use two such elements to create a visual feeling of water waves one after another.
.good_water-1..good_water-2 {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0 ;
  filter: blur(1px);
}
.good_water-1 {
  box-shadow:.4rem .4rem .8rem #c8d0e7, 
  -.4rem -.4rem .8rem #fff;
  background: linear-gradient(to bottom right, #c8d0e7 0%.#fff 100%);
  animation: waves 2s linear;
}
.good_water-2 {
  box-shadow:.4rem .4rem .8rem #c8d0e7, 
  -.4rem -.4rem .8rem #fff;
  animation: waves 2s linear 1s;
}
@keyframes waves {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0; }}Copy the code
  • Just like the button, we added different shadows to the two water elements to give them a more three-dimensional feel, and in order to create the sensation of the water disappearing, we needed a transition attributefilter: blur(1px).
/** JS **/
  <script>
    let btn=document.getElementById('waterButton')
    let water1=document.getElementById('water1')
    let water2=document.getElementById('water2')
    let timer=' '
    btn.addEventListener('click'.() = >{
      window.clearTimeout(timer)
      water1.classList.add("good_water-1");
      water2.classList.add("good_water-2");
      setTimeout(() = >{
        water1.classList.remove("good_water-1");
        water2.classList.remove("good_water-2");
      }, 3000)
    })
  </script>
Copy the code
  • Next we set the click event to dynamically add styles and remove styles after the animation is over, so we can see the effect

💦 blast microwave

  • If we don’t want the wave to stop so fast, we can also set the wave animation to an infinite loop, so that we don’t need to click the button to apply the style, we can apply the style to the wave, and then toanimationSet up an infinite loopinfinite
.good_water-1{...animation: waves 2s linear infinite;

}
.good_water-2{...animation: waves 2s linear 1s infinite;
}
Copy the code
  • Next, let’s take a look at the effect.

👋 is at the end

  • First of all, thank you for seeing this. This is just learningcssSome of the fun, for the business may not be very practical, but for a pleasure ~ work so tired, multi-purpose front-end to do some fun things.
  • The front-end world is so wonderful that only careful people can find it interesting. I hope I can help those in need.
  • If you feel that this article has helped to your words might as well 🍉 attention + likes + favorites + comments + forward 🍉 support yo ~~😛 your support is the biggest power OF my update.

🌅 past wonderful

Product Manager: Can you get the word cloud moving?

Fix echarts map rotation highlighting ⚡

Read still not clear redraw and rearrangement come over beat me 👊, I say!!

How to elegantly write component examples using Vuepress (1) 👈

How to elegantly write component examples using Vuepress (below) 👈