• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как создать пульсирующий эффект на CSS (Создаем красивый эффект пульсирующий кнопки на чистом CSS)
Как создать пульсирующий эффект на CSS
Kosten
Дата: Суббота, 2020-04-11, 04:41 | Сообщение 1
Оффлайн
Администраторы
Сообщений:26308
Награды: 61


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

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

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



Установка:

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

Код
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

HTML

Код
    <div class="pusatsiya">
   <i class="fa fa-phone" aria-hidden="true"></i>
   </div>

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
Дата: Суббота, 2020-04-11, 04:53 | Сообщение 2
Оффлайн
Администраторы
Сообщений:26308
Награды: 61


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


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


Страна: (RU)
Kosten
Дата: Суббота, 2020-04-11, 04:59 | Сообщение 3
Оффлайн
Администраторы
Сообщений:26308
Награды: 61


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



HTML

Код
<div class="container">
    <div class="corpus diamond">
  <div class="diamond diamond-inner diamond-right"></div>
  <div class="diamond diamond-inner diamond-left"></div>
    </div>
</div>

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)
Форум » Web-Раздел » Начинающему вебмастеру » Как создать пульсирующий эффект на CSS (Создаем красивый эффект пульсирующий кнопки на чистом CSS)
  • Страница 1 из 1
  • 1
Поиск: