ZorNet.Ru — сайт для вебмастера » HTML и CSS » Значок с анимацией по краям на CSS3

Значок с анимацией по краям на CSS3

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

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

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

HTML

Код

CSS

Код

.dekatules{
  position: absolute;
  width: 175px;
  height: 175px;
  background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/zadesamitug.png) no-repeat;
  background-size: 175px 175px;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 3;

  -webkit-box-shadow:
  0 0 0 10px rgba(247, 244, 244, 0.2),
  0 0 25px 2px rgba(14, 14, 14, 0.4),
inset 0 0 0 15px rgba(247, 244, 244, 0.2);
  -moz-box-shadow:
  0 0 0 10px rgba(247, 244, 244, 0.2),
  0 0 25px 2px rgba(14, 14, 14, 0.4),
inset 0 0 0 15px rgba(247, 244, 244, 0.2);
  box-shadow:
  0 0 0 10px rgba(255,255,255,.2),
  0 0 25px 2px rgba(0,0,0,.4),
inset 0 0 0 15px rgba(255,255,155,.4);

  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  border-radius: 999px;
}

.cundekin {
  position: absolute;
  width: 198px;
  height: 198px;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 1;
  opacity: 0;
  border: 2px solid rgba(249, 244, 244, 0.1);

  -webkit-animation: pulsejg1 4s linear infinite;
  -moz-animation: pulsejg1 4s linear infinite;
  animation: pulsejg1 4s linear infinite;
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  border-radius: 999px;
  -webkit-box-shadow: inset 0px 0px 15px 10px rgba(8, 8, 8, 0.6);
  -moz-box-shadow: inset 0px 0px 15px 10px rgba(8, 8, 8, 0.6);
  box-shadow: inset 0px 0px 15px 10px rgba(8, 8, 8, 0.6);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.nuksaged {
  position: absolute;
  width: 198px;
  height: 198px;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 2;
  opacity: 0;
  border: 1px solid rgba(251, 246, 246, 0);

  -webkit-animation: pulsejg2 4s linear infinite;
  -moz-animation: pulsejg2 4s linear infinite;
  animation: pulsejg2 4s linear infinite;
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  border-radius: 999px;
  -webkit-box-shadow: inset 0px 0px 12px 5px rgba(247, 244, 244, 0.8);
  -moz-box-shadow: inset 0px 0px 12px 5px rgba(247, 244, 244, 0.8);
  box-shadow: inset 0px 0px 12px 5px rgba(247, 244, 244, 0.8);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@-webkit-keyframes pulsejg1 {
  0% {
  -webkit-transform: scale(.6);
  opacity: 0;
  }

  50% {
  -webkit-transform: scale(.6);
  opacity: 0;
  }

  60% {
  -webkit-transform: scale(.9);
  opacity: .2;
  }

  70% {
  -webkit-transform: scale(1.1);
  opacity: .35;
  }

  80% {
  -webkit-transform: scale(1.25);
  opacity: .2;
  }

  100% {
  -webkit-transform: scale(1.4);
  opacity: 0;
  }
}

@-moz-keyframes pulsejg1 {
  0% {
  -moz-transform: scale(.6);
  opacity: 0;
  }

  50% {
  -moz-transform: scale(.6);
  opacity: 0;
  }

  60% {
  -moz-transform: scale(.9);
  opacity: .2;
  }

  70% {
  -moz-transform: scale(1.1);
  opacity: .35;
  }

  80% {
  -moz-transform: scale(1.25);
  opacity: .2;
  }

  100% {
  -moz-transform: scale(1.4);
  opacity: 0;
  }
}

@keyframes pulsejg1 {
  0% {
  transform: scale(.6);
  opacity: 0;
  }

  50% {
  transform: scale(.6);
  opacity: 0;
  }

  60% {
  transform: scale(.9);
  opacity: .1;
  }

  70% {
  transform: scale(1.1);
  opacity: .25;
  }

  80% {
  transform: scale(1.25);
  opacity: .1;
  }

  100% {
  transform: scale(1.4);
  opacity: 0;
  }
}

@-webkit-keyframes pulsejg2 {
  0% {
  -webkit-transform: scale(.6);
  opacity: 0;
  }

  40% {
  -webkit-transform: scale(.8);
  opacity: .05;
  }

  50% {
  -webkit-transform: scale(1);
  opacity: .1;
  }

  60% {
  -webkit-transform: scale(1.1);
  opacity: .3;
  }

  80% {
  -webkit-transform: scale(1.2);
  opacity: .1;
  }

  100% {
  -webkit-transform: scale(1.3);
  opacity: 0;
  }
}

@-moz-keyframes pulsejg2 {
  0% {
  -moz-transform: scale(.6);
  opacity: 0;
  }

  40% {
  -moz-transform: scale(.8);
  opacity: .05;
  }

  50% {
  -moz-transform: scale(1);
  opacity: .1;
  }

  60% {
  -moz-transform: scale(1.1);
  opacity: .3;
  }

  80% {
  -moz-transform: scale(1.2);
  opacity: .1;
  }

  100% {
  -moz-transform: scale(1.3);
  opacity: 0;
  }
}

@keyframes pulsejg2 {
  0% {
  transform: scale(.6);
  opacity: 0;
  }

  40% {
  transform: scale(.8);
  opacity: .05;
  }

  50% {
  transform: scale(1);
  opacity: .1;
  }

  60% {
  transform: scale(1.1);
  opacity: .3;
  }

  80% {
  transform: scale(1.2);
  opacity: .1;
  }

  100% {
  transform: scale(1.3);
  opacity: 0;
  }
}

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

И да, как можно заметить, что под темный фон выстроена анимация, где если нужно изменить гамму цвета, то все в прикрепленном CSS выполняется по настройке под свою стилистику сайта.

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

16 Июля 2019 Загрузок: 1 Просмотров: 821 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0