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

Подсказка с анимацией при помощи CSS3

Давайте подробно разберем материал, как подсказку при наведении клика, что с помощью свойств CSS3 отлично работает и показывает корректно, но главное идет без использования javascript. Здесь представлена одна из простых, но в то же время красиво исполнено по дизайну всплывающая подсказка на CSS3,

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

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

Так реально выглядит подсказка:

Анимированные подсказки для элементов текста и ссылок

Анимированные подсказки для элементов текста и ссылок

HTML 5

На этот раз разметка очень проста, понятна и легка в освоении, мы вставили тег small в теге a, потому что когда мы подведем курсор мыши, появится наша подсказка.

Код

<footer id="desamulop-asgedunaveg">
 <ul id="usedanimad">
 <li><a href="#" class="kigudsan">Dribble</a></li>
 <li><a href="#" class="lopasenub">Forrst</a></li>
 <li><a href="#" class="udsacetub">Facebook</a></li>
 <li><a href="#" class="asetugdem">Twitter</a></li>
 <li><a href="#" class="poudsal">Google+</a></li>
 <li><a href="#" class="kudetug">LinkedIn</a></li>
 </ul>
</footer>

CSS

Теперь мы установили крепление панели в нижней части окна просмотра.

Код

body {
  background: #1d1c1c url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/pattern_40.gif) top left repeat;
  margin: 0;
  padding: 0;
  font: 12px normal Verdana, Arial, Helvetica, sans-serif;
  height: 100%;
}

#desamulop-asgedunaveg {
  background-color: #161616;
  background: -moz-linear-gradient(top, rgba(19, 17, 17, 0.7) 0%, rgba(49, 47, 47, 0.7) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(19, 17, 17, 0.7)), color-stop(100%,rgba(49, 47, 47, 0.7)));
  background: -webkit-linear-gradient(top, rgba(19, 17, 17, 0.7) 0%,rgba(49, 47, 47, 0.7) 100%);
  background: -o-linear-gradient(top, rgba(19, 17, 17, 0.7) 0%,rgba(19, 17, 17, 0.7) 100%);
  background: linear-gradient(top, rgba(19, 17, 17, 0.7) 0%,rgba(19, 17, 17, 0.7) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2161616,endColorstr=#B2333333);
  -moz-box-shadow: 0 1px 10px #0cc2f7;
  -webkit-box-shadow: 0 1px 10px #0cc2f7;
  box-shadow: 0 1px 10px #0cc2f7;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
}

Теперь мы даем стиль нашему неупорядоченному списку, так как это просто пример, который вы можете экспериментировать, как вам нравится.

Код

#desamulop-asgedunaveg ul {
  padding: 0;
  margin: 0;
  float: left;
  width: 78%;
  margin: 0 9%;
  list-style: none;
  font-size: 1em;
}

#desamulop-asgedunaveg ul li {
  padding: 0;
  margin: 0;
  float: left;
  position: relative;
  border-right: 1px solid #3c3939;
}

#desamulop-asgedunaveg ul li:first-child {
  border-left: 1px solid #3c3939;
}

#desamulop-asgedunaveg ul li a {
  margin: 4px;
  margin-left: 19px;
  margin-right: 19px;
  float: left;
  height: 25px;
  width: 25px;
  text-decoration: none;
  color: #2d2b2b;
  position: relative;
}

Здесь ставим ссылки на кнопки.

Код

a.kigudsan { background:url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/kifsaml.png) no-repeat; width:25px;}
a.lopasenub { background:url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/Forrst.png) no-repeat; }
a.udsacetub { background:url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/Facebook.png) no-repeat;}
a.asetugdem { background:url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/Twitter.png) no-repeat;}
a.poudsal { background:url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/google.png) no-repeat;}
a.kudetug { background:url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/Linkedin.png) no-repeat;}

Теперь стиль подсказки, по умолчанию, small скрыт сdisplay: none, при наведении курсора на всплывающую подсказку для отображения: block; Наконец мы создаем правила для анимации.

Код

#desamulop-asgedunaveg a small {
  background: #040404;
  text-align: center;
  width: 70px;
  padding: 5px;
  border-left: 1px solid #191818;
  border-top: 1px solid #191818;
  border-right: 1px solid #292828;
  border-bottom: 1px solid #292828;
  border-radius: 3px;
  display: none;
  color: #fff;
  font-size: 0.8em;
  text-indent: 0;
}

#desamulop-asgedunaveg a:hover small {
  display: block;
  position: absolute;
  top: 0px;
  left: 50%;
  margin: -40px;
  z-index: 9999;
  -moz-animation: mymove .25s linear;
  -webkit-animation: mymove .25s linear;
}

Анимация очень проста, просто возьмите свойство transform: scale (x, y); и играть со значением, чтобы воссоздать эффект отказов.

Код

@-moz-keyframes mymove {
  0% {
  -moz-transform: scale(0,0);
  opacity: 0;
  }

  50% {
  -moz-transform: scale(1.2,1.2);
  opacity: 0.3;
  }

  75% {
  -moz-transform: scale(0.9,0.9);
  opacity: 0.7;
  }

  100% {
  -moz-transform: scale(1,1);
  opacity: 1;
  };
}

@-webkit-keyframes mymove {
  0% {
  -webkit-transform: scale(0,0);
  opacity: 0;
  }

  50% {
  -webkit-transform: scale(1.2,1.2);
  opacity: 0.3;
  }

  75% {
  -webkit-transform: scale(0.9,0.9);
  opacity: 0.7;
  }

  100% {
  -webkit-transform: scale(1,1);
  opacity: 1;
  };
}

Заключение:

Здесь установка завершена, где благодаря этому методу в чистом CSS3, мы воссоздали всплывающую подсказку без использования jQuery. Если у вас есть какие-либо комментарии или предложения.

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

18 Апреля 2019 Загрузок: 1 Просмотров: 1140 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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