Кнопка «Вода» 💧

внешний интерфейс CSS
Кнопка «Вода» 💧

Это 26-й день моего участия в августовском испытании обновлений. Узнайте подробности события:Испытание августовского обновления

🐳 Предисловие

  • Я не знаю, обращаешь ли ты внимание обычно на момент падения капель воды.
  • Если внимательно слушать и внимательно смотреть, рябь от каждой капли капельки воды завораживает.
  • Рябь, которая появляется и исчезает одна за другой, подобны времени, которое вроде бы что-то унесло, или что-то оставило, и вроде бы ничего не изменилось, но ощущается как нечто большее, от чего хочется заказать.赞~~
  • Хорошо, без шуток, давайте попробуем сделать эту волнистую кнопку.

water.gif

🤽‍♂️ Список дел

  • тишина
  • стрекоза
  • взрывы микроволн

🚿 Просто сделай это

  • По сути, сделать такой эффект — это не что иное, как то, что рядом с кнопкой посередине будут две постепенно увеличивающиеся тени, и со временем, по мере того, как диапазон теней становится больше, он постепенно исчезает.

🌱 Тихо

  • Давайте сначала создадим спокойное озеро, которое является нашей кнопкой.
/** 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>
  • В базовом макете нам нуженdivОберните похожее изображение, чтобы представить кнопку, плюс еще дваspanЭтикетка, указывающая на то, что вот-вот появятся волны, которые будут использоваться позже.
/** 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;
}
  • Поскольку он имитирует эффект воды, это не хорошо, если тени кнопок особенно одиночные и одинаковые. В это время мы можем сделать белую тень над кнопкой и серую тень под ней. Вот рекомендуемый веб-сайт для всех.Если вам нужно сделать эти тени, вы можете отладить их здесь.Neumorphism.io.

image.png

🍃 Стрекоза

  • Поскольку это кнопка, нам нужно событие щелчка, чтобы имитировать ощущение капель воды, капающих в озеро.
  • Ощущение ряби на воде можно превратить в анимацию, так что такой элемент, как кнопка, постепенно увеличивается в два раза, а затем медленно исчезает Мы можем использовать два таких элемента, чтобы визуально создать ощущение волн на воде один за другим.
.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;
  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;
  }
}
  • Как и в случае с кнопкой, мы также добавляем разные тени к двум элементам волны воды, чтобы ощущение было более трехмерным, а чтобы создать ощущение постепенно исчезающей волны воды, нам нужно задать атрибут переходаfilter: 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>
  • Затем мы настраиваем событие щелчка для динамического добавления и удаления стиля в конце стиля анимации, поэтому мы посмотрим на его эффект ~

water8.gif

💦 всплески микроволновой печи

  • Если мы не хотим, чтобы волна воды останавливалась так быстро, мы также можем установить анимацию волны воды на бесконечный цикл, чтобы нам не нужно было добавлять стиль при нажатии кнопки, мы добавляем стиль воде волна, а затем датьanimationНастройте воспроизведение бесконечного циклаinfinite 
.good_water-1 {
  ...
  animation: waves 2s linear infinite;

}
.good_water-2 {
  ...
  animation: waves 2s linear 1s infinite;
}
  • Далее, давайте посмотрим на эффект ~ Разве это не плохо?

water9.gif

👋 Напишите в конце

  • Прежде всего, спасибо, что заглянули сюда, на этот раз мы делимся информацией только для обучения.cssНекоторые забавы в нем могут быть непрактичными для бизнеса, но это весело~ Я так устал на работе, что использую интерфейс, чтобы делать кое-какие забавные вещи.
  • Внешний мир слишком прекрасен, и только осторожные люди могут найти в нем развлечение, надеясь помочь нуждающимся.
  • Если вы считаете эту статью полезной, пожалуйста,🍉 Подписаться + Нравится + Избранное + Комментарий + Ретвитнуть 🍉Поддержите~~😛Ваша поддержка - самая большая мотивация для моего обновления.

🌅 Прекрасное прошлое

Менеджер по продукту: Можете ли вы заставить облако слов двигаться?

Одна статья, чтобы выделить карусель карты echarts ⚡

Прочитав это, я не могу отличить перерисовку от перестановки, иди и побей меня 👊, сказал я! ! !

Как использовать образец элегантного письма Vuepress (на) 👈

Как элегантно использовать Vuepress для написания примера компонента (ниже) 👈

Категории