<Назад
CSS анимация пульсации

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


<span class="pulse"></span>

.pulse {
  margin:100px;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #cca92c;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(204,169,44, 0.4);
  animation: pulse 2s infinite;
}
.pulse:hover {
  animation: none;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
      box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
Хэштеги:
#css
Поделиться:

Самое свежее

Простыми словами о графах

В этой статье мы начнем знакомство с графами, познакомимся с одним из алгоритмов для работы с графами и реализуем граф на языке программирования Rust.

#графы
#rust
#алгоритмы

В чем отличие аутсорсинга разработки от аутстаффинга ИТ-сотрудника для разработки?

В этой статье разберемся, что такое аутсорс- и аутстафф-разработка.

#процессразработки

Знакомьтесь, Пентест

Начинаем рассматривать один из основных методов оценки безопасности компьютерных систем и сетей на предмет потенциальных уязвимостей - тестирование на проникновение

#пентест

Сокращаем срок реализации MVP

Разберемся со сроками реализации MVP.

#процессразработки

Тестирование концепции MVP

Разбираемся с тем, как не потратить бюджеты на разработку MVP впустую

#процессразработки

Неверная оценка стоимости услуг ИТ подрядчика

Сегодня мы поговорим о неверной оценке стоимости разработки ИТ решений. Эта боль - одна из основных для предприятий и стартапов, включая самих ИТ подрядчиков.

#консалтинг

Введение в паттерны проектирования в разработке программного обеспечения

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

#шаблоныпроектирования

Уровни модели OSI

В этой статье мы более подробно рассмотрим каждый из уровней модели OSI

#сети
#osi

Документирование кода в языке программирования Rust

В этой статье рассмотрим то, как происходит документирование в Rust и рассмотрим очень полезную возможность - написание тестов через документирование.

#rust

Знакомство с моделью OSI

В этой статье начинаем рассматривать фундаментальную модель сетевого взаимодействия - OSI

#сети

От концепции к MVP

В этой статье вы узнаете, на примере, о том, как перейти от концепции к MVP без лишних усложнений в функционале продукта

#процессразработки

Введение в написание технического задания

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

#процессразработки

Введение в разработку

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

#процессразработки

От идеи к концепции

В этой публикации мы поговорим о том, чем идея отличается от концепции. Сделаем это на примере конкретной цели

#процессразработки

Взвешенные графы

В этой статье мы познакомимся со взвешенными графами, алгоритмом Дейкстры и его реализацией на языке программирования Rust.

#алгоритмы
#графы

Зачем VPN бизнесу?

В этой статье мы рассмотрим то, как можно обезопасить доступ к облачным ресурсам предприятия с помощью VPN

#сети
#впн