CSS реализует кнопку анимации частиц

Оригинальная ссылка
Github.com/xbox y Нажмите / не ...

Кнопки, вероятно, являются одним из наиболее распространенных компонентов на веб-страницах, и большинство из них безвкусны.Если вы столкнетесь с такой кнопкой, возникнет ли у вас соблазн нажать ее еще несколько раз?

Обычно первой реакцией на такое воздействие может быть использованиеcanvas, например следующеекейс

Эффект еще более шокирующий, конечноcanvasСуществуют также определенные пороги для реализации, и на практике использовать их немного проблематично (всеjsОбщая проблема реализации), попробуйте здесьCSSспособ реализации.

генерировать частицы

отложить в сторонуjsплан, иHTMLа такжеCSSСпособ реализации.HTMLСамо собой разумеется, пишите много тегов напрямую

<button>
    button
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    ...
</button>

В общем, мне этот способ не очень нравится, слишком много тегов, структура некрасивая, да и на существующих страницах могут быть другие эффекты (во многих случаях не удобно модифицировать исходныйHTMLструктура)

Тогда взглянитеCSSЕсть в основном два способа реализации.На самом деле, нужно подумать о том, какие атрибуты можно бесконечно накладывать друг на друга.box-shadow, а другой естьbackground-image(CSS3 поддерживает бесконечные наложения).

1.box-shadow

давайте сначала посмотримbox-shadowКстати, чтобы избежать использования лишних тегов, здесь для генерации используются псевдоэлементы.

.button::before{
  position: absolute;
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #ff0081;
  box-shadow: 10px 10px #ff0081,15px 0px 0 2px #ff0081,20px 15px 0 3px #ff0081,...;/*无限叠加*/
}

Эффект все же есть.Главное потратить больше времени на отладку.Здесь положение и размер частиц в основном определяются по смещению и расширению.

Но смещение здесь может быть толькоpxБлок не может быть хорошо адаптирован к размеру кнопки, поэтому здесь второй способ добиться

2.background-image

CSS3background-imageможно накладывать бесконечно, подобно

.myclass {
  background: background1, background2, /*...*/ backgroundN;
}

Здесь мы можем использовать радиальный градиентradial-gradientдля достижения нескольких маленьких точек.

.button::before{
  position: absolute;
  content: '';
  left: -2em;
  right: -2em;
  top: -2em;
  bottom: -2em;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image: radial-gradient(circle, #ff0081 20%, transparent 0), 
  radial-gradient(circle, #ff0081 20%, transparent 0),
  radial-gradient(circle, #ff0081 20%, transparent 0), 
  radial-gradient(circle, #ff0081 20%, transparent 0), 
  ...;
  background-size: 10% 10%, 20% 20%, 15% 15%,...;
  background-position: 18% 40%, 20% 31%, 30% 30%,...;
}

Здесь главным образом черезbackground-sizeа такжеbackground-positionКонтролировать размер и положение начала координат кажется довольно сложным, на самом деле, покаbackground-sizeа такжеbackground-positionа такжеbackground-imageПозиции совмещаются одна за другой. Это может быть сложно отладить в реальной разработке.Вы можете точно настроить эффект предварительного просмотра в реальном времени прямо в консоли с помощью клавиш вверх, вниз, влево и вправо на клавиатуре (рассмотрите возможность создания инструмента визуализации).

Это создает простой эффект частиц.

пошевеливайся

несмотря на то чтоbackground-imageне поддерживаетсяCSSанимация, но два другихbackground-sizeа такжеbackground-positionподдержка, так чтоCSS transitionа такжеCSS animationможет быть использован.

Эффект анимации очень прост, то есть процесс распространения частиц из центра и их постепенного исчезновения.

transition

давайте сначала посмотрим:hoverвзаимодействовать

.button::before{
  transition:.75s background-position ease-in-out,75s background-size ease-in-out;
}
.button:hover::before{
  background-position: 5% 44%, -5% 20%, 7% 5%...;
  background-size: 0% 0%;
}

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

Нам нужно не отступать назад, когда мышь уходит, как этого добиться?

очень просто, поставьtransitionустановить в:hoverВниз спускаться нормально, а значит переход есть только при проходе мыши, а не при выходе

.button:hover::before{
  background-position: 5% 44%, -5% 20%, 7% 5%...;
  background-size: 0% 0%;
  transition:.75s background-position ease-in-out,75s background-size ease-in-out;
}

Это чувствует себя немного лучше? нажмитездесьПроверить.

Что, если мы хотим, чтобы анимация частиц появлялась при нажатии? Здесь нужно использовать:activeПсевдокласс.

Если мы будем следовать:hoverлогика, то

.button:active::before{
  background-position: 5% 44%, -5% 20%, 7% 5%...;
  background-size: 0% 0%;
  transition:.75s background-position ease-in-out,75s background-size ease-in-out;
}

К сожалению, его можно активировать только при удерживании мыши. Как только мышь будет поднята, она исчезнет. В это время нам нужно изменить угол. Можно представить, что он по умолчанию расходится, а потом сходится при клике, и возвращается в предыдущее расходящееся состояние при поднятии, при этом нужно отменить эффект перехода при клике, следующим образом

.button::before {
    /*...*/
    background-position: 5% 44%...;/*扩散的状态*/
    background-size: 0% 0%;
    transition: background-position .5s ease-in-out, background-size .75s ease-in-out;
}

.button:active::before {
  transition:0s;/**注意取消掉过渡**/
  background-size: 10% 10%, 20% 20%...;
  background-position: 18% 40%, 20% 31%,...;
}

вы можете проверить этоdemo

почему в:activeнужноtransition:0sНу можно попробовать понять эффект без его добавления, следующим образом

animation

animationа такжеtransitionПринцип реализации аналогичен, а преимущество в том, что можно делать более детализированные анимации.:activeспособ.

.button::before{
  /*...*/
  animation: bubbles ease-in-out .75s forwards;
}
.button:active::before {
  animation: none; /*这里注意取消动画*/
  background-size: 0;
}
@keyframes bubbles {
  0% {
    background-position: 18% 40%, ...;
  }
  50% {
    background-position: 10% 44%, ...;
  }
  100% {
    background-position: 5% 44%, ...;
    background-size: 0% 0%;
  }
}

допустимыйздесьПроверьте исходный код.

Единственным недостатком может быть то, что анимация инициализации выполняется один раз.

резюме

Выше представлен чистый CSS для создания кнопки анимации частиц, преимущества очевидны, скопируйте егоCSSЕго можно использовать напрямую, закинув в проект, независимо от того, какой это нативный проект.reactНет необходимости привязывать какие-либо события, и не требуется дополнительная логическая обработка для улучшения существующего опыта. Только подумайте, если это кнопка «купить», будет ли она побуждать вас покупать больше раз, в любом случае, меня точно привлечет, ха~ Есть еще некоторые недостатки, такие как вышеуказанное позиционирование, которое требует большой работы.Рекомендуется доработать эти функции после завершения общего проекта.Также можно попробовать сделать некоторые инструменты визуализации, чтобы уменьшить нагрузку.Сделано.