• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создать анимированные подсказки через CSS3 (Как самостоятельно создать подсказки CSS при наведение)
Создать анимированные подсказки через CSS3
Kosten
Дата: Воскресенье, 2018-10-21, 21:23 | Сообщение 1
Администраторы
Сообщений:18498
Награды: 55


Сейчас не кого не удивить подсказкой, где пользователь наводит на ключевое слова, что написано на сайте. Главный вопрос состоит, а как их на сайте можно создать, и что одно из главный ответов. что это можно сделать при помощи чистой стилистике на CSS.

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



HTML

Код
<h1>ZorNet - портал для вебмастера</h1>
<ul>
  <li class="nodesamisa fade" data-title="Гипертекстовой разметки">HTML
  <li class="nodesamisa fade" data-title="Каскадные таблицы стилей">CSS
  <li class="nodesamisa fade" data-title="Javascript">JS
</ul>

<h1>ZorNet - портал для вебмастера 2</h1>
<ul>
  <li class="nodesamisa expand" data-title="Гипертекстовой разметки">HTML
  <li class="nodesamisa expand" data-title="Каскадные таблицы стилей">CSS
  <li class="nodesamisa expand" data-title="Javascript">JS
</ul>

<h1>ZorNet - портал для вебмастера 3</h1>
<ul>
  <li class="nodesamisa swing" data-title="Гипертекстовой разметки">HTML
  <li class="nodesamisa swing" data-title="Каскадные таблицы стилей">CSS
  <li class="nodesamisa swing" data-title="Javascript">JS
</ul>


CSS

Код
/* setup nodesamisas */
.nodesamisa {
  position: relative;
}
.nodesamisa:before,
.nodesamisa:after {
  display: block;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
.nodesamisa:after {
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(0,0,0,.75);
  border-left: 6px solid transparent;
  content: '';
  height: 0;
    top: 20px;
    left: 20px;
  width: 0;
}
.nodesamisa:before {
  background: rgba(0,0,0,.75);
  border-radius: 2px;
  color: #fff;
  content: attr(data-title);
  font-size: 14px;
  padding: 6px 10px;
    top: 26px;
  white-space: nowrap;
}

/* the animations */
/* fade */
.nodesamisa.fade:after,
.nodesamisa.fade:before {
  transform: translate3d(0,-10px,0);
  transition: all .15s ease-in-out;
}
.nodesamisa.fade:hover:after,
.nodesamisa.fade:hover:before {
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* expand */
.nodesamisa.expand:before {
  transform: scale3d(.2,.2,1);
  transition: all .2s ease-in-out;
}
.nodesamisa.expand:after {
  transform: translate3d(0,6px,0);
  transition: all .1s ease-in-out;
}
.nodesamisa.expand:hover:before,
.nodesamisa.expand:hover:after {
  opacity: 1;
  transform: scale3d(1,1,1);
}
.nodesamisa.expand:hover:after {
  transition: all .2s .1s ease-in-out;
}

/* swing */
.nodesamisa.swing:before,
.nodesamisa.swing:after {
  transform: translate3d(0,30px,0) rotate3d(0,0,1,60deg);
  transform-origin: 0 0;
  transition: transform .15s ease-in-out, opacity .2s;
}
.nodesamisa.swing:after {
  transform: translate3d(0,60px,0);
  transition: transform .15s ease-in-out, opacity .2s;
}
.nodesamisa.swing:hover:before,
.nodesamisa.swing:hover:after {
  opacity: 1;
  transform: translate3d(0,0,0) rotate3d(1,1,1,0deg);
}

/* basic styling: has nothing to do with nodesamisas: */
h1 {
  padding-left: 50px;
}
ul {
  margin-bottom: 40px;
}
li {
  cursor: pointer;
  display: inline-block;
  padding: 0 10px;
}


Вы даже можете использовать это как шаблон для настройки собственных анимаций CSS для создании. Они бывают трех разных стилей: выцветания, расширения и движения качания.

Демонстрация
Прикрепления: 0687872.png(2.5 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создать анимированные подсказки через CSS3 (Как самостоятельно создать подсказки CSS при наведение)
  • Страница 1 из 1
  • 1
Поиск: