Как создать пульсирующий эффект на CSS - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Как создать пульсирующий эффект на CSS (Создаем красивый эффект пульсирующий кнопки на чистом CSS)

Как создать пульсирующий эффект на CSS

Kosten

Суббота, 11 Апреля 2020, 04:41 | Сообщение 1

Администраторы

Сообщений:44490

Награды: 70

« 557 »

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

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

Так выглядит с установки:

Установка:

Нужно в HEAD подключить шрифтовые кнопки

Код

HTML

Код

CSS

Код

.pusatsiya {
    position: absolute;
    top: 48%;
    left: 48%;
    transform: translate(-50%,-50%);
    width: 80px;
    height: 80px;
    background: #58ca13;
    color: #fffbfb;
    border-radius: 50%;
    text-align: center;
    line-height: 84px;
    font-size: 48px;
}
.pusatsiya:before,
.pusatsiya:after
{
   content:'';
   display:block;
   position:absolute;
   border:50%;
   border:1px solid #58ea00;
   left:-20px;
   right:-20px;
   top:-20px;
   bottom:-20px;
   border-radius:50%;
   animation:animate 1.5s linear infinite;
   opacity:0;
   backface-visibility:hidden;
   }
.pusatsiya:after{
   animation-delay: .5s;
   }
@keyframes animate{

   0%
   {transform:scale(0.5);
      opacity:0;
      }

   50%{
      opacity:1;
      }
   100%{
   transform: scale(1.2);
   opacity:0;
      }

   }

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

Демонстрация

Прикрепления: 0052341.png (12.4 Kb) · pulseing-effect.zip (3.1 Kb)

Страна: (RU)

Kosten

Суббота, 11 Апреля 2020, 04:53 | Сообщение 2

Администраторы

Сообщений:44490

Награды: 70

« 557 »

Еже одна вариация под пульсирующее кнопку, которая создано в совершенно другом стиле.

See the Pen
Magic bonfire by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Суббота, 11 Апреля 2020, 04:59 | Сообщение 3

Администраторы

Сообщений:44490

Награды: 70

« 557 »

Этот эффект огня или пульса элементов, который выполнен на чистом CSS.

HTML

Код

CSS

Код

:root {
    --f-border-radius: 0.45rem;
    --f-orange: #ffc719;
    --f-red: #bf033b;
    --f-rotated: 45deg;
    --f-size: 7.25rem;
    --f-animation-duration: 0.75s;
    --f-animation-name: vibrate;
    --f-animation-delay: 0.25s;
}

body {
    margin: 0;
}

.container {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 100vh;
}

.corpus {
    position: absolute;
    transform: rotate(var(--f-rotated));
}

.diamond {
    background-color: var(--f-red);
    background-image: linear-gradient(
  195deg,
  var(--f-red) 0%,
  var(--f-orange) 74%
    );
    border-radius: var(--f-border-radius);
    height: var(--f-size);
    width: var(--f-size);
}

.diamond-inner {
    position: relative;
    animation: var(--f-animation-name) var(--f-animation-duration) ease-in
  var(--f-animation-delay) alternate-reverse infinite;
}

.diamond-right {
    --f-animation-duration: 0.95s;
    --f-size: 4.25rem;

    right: -35px;
    top: -45px;
}

.diamond-left {
    --f-animation-delay: 0.05s;
    --f-size: 3.45rem;

    right: 65px;
    top: -45px;
}

.diamond-inner::after {
    animation: var(--f-animation-name) var(--f-animation-duration) ease-in
  var(--f-animation-delay) alternate-reverse infinite;
    background-image: linear-gradient(
  195deg,
  var(--f-red) 0%,
  var(--f-orange) 74%
    );
    border-radius: 0.15rem;
    content: '';
    display: block;
    height: 1.25rem;
    width: 1.25rem;
    position: relative;
    right: -15px;
    top: -45px;
}

.diamond-right.diamond-inner::after {
    top: -25px;
    width: 0.75rem;
    height: 0.75rem;
}

@keyframes vibrate {
    to {
  transform: scale(0.75) translate(15px, 15px);
    }
}

Демонстрация

Прикрепления: 1176554.png (18.9 Kb) · css3-fire.zip (3.3 Kb)

Страна: (RU)

Как создать пульсирующий эффект на CSS (Создаем красивый эффект пульсирующий кнопки на чистом CSS)

Страница 1 из 1
1