• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать анимацию при звонке при помощи CSS (Красиво исполненная CSS анимация с помощью @keyframes)
Создать анимацию при звонке при помощи CSS
Kosten
Дата: Вторник, 2019-04-23, 02:39 | Сообщение 1
Администраторы
Сообщений:21751
Награды: 56


Вашему вниманию красиво созданная анимация, которая создает волны от кнопки, что происходит при звонке на телефон, где используют чистый CSS и кнопки от Font Awesome. Безусловно вы могли на официальных сайтах встречать такой эффект, что теперь можете поставить на свой, где прикреплены CSS для полного редактирование, как по самой анамации и размеру фигуры.

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



HTML

Код
<div class="nekaluselan_umatganusin">
  <i class="fas fa-phone"></i>
</div>

CSS

Код
.nekaluselan_umatganusin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 195px;
    height: 195px;
    background: #14bb0b;
    border-radius: 100%;
}

.nekaluselan_umatganusin .fas{
  color:white;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(90deg);
  font-size:7em;
}

.nekaluselan_umatganusin:before,
.nekaluselan_umatganusin:after{
  content:'';
  display:block;
  position:absolute;
  border:50%;
  border:1px solid #58ea00;
  top:-20px;
  left:-20px;
  right:-20px;
  bottom:-20px;
  border-radius:50%;
  animation:animtephone 1.5s linear infinite;
  opacity:0;
}

.nekaluselan_umatganusin:after{
  animation-delay:0.5s;
}

@keyframes animtephone{
  0%{
    transform:scale(0.5);
    opacity:0;
  }
  50%{
    opacity:1;
  }
  100%{
    transform:scale(1.2);
    opacity:0;
  }
}

Чтоб появилась фигура, виде телефонной трубки, то на сайте нужно подключить шрифтовые кнопки Font Awesome.

Демонстрация
Прикрепления: 5310661.png(27.5 Kb) · css-and-font-aw.zip(1.9 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать анимацию при звонке при помощи CSS (Красиво исполненная CSS анимация с помощью @keyframes)
  • Страница 1 из 1
  • 1
Поиск: