ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект раскрытие скобок с помощью CSS

Эффект раскрытие скобок с помощью CSS

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

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

Приступаем к установки:

HTML

Код

<nav class="pacasead-benaprod">
  <a href="http://zornet.ru">Главная</a>
  <a href="#">Zornet.Ru</a>
  <a href="#">SEO</a>
</nav>

CSS

Код

nav a {
  position: relative;
  display: inline-block;
  margin: 8px 19px;
  outline: none;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #05052d;
  font-size: 3.78em;
  text-shadow: 0 0 1px rgba(247, 242, 242, 0.3);
}

.pacasead-benaprod a:before,
.pacasead-benaprod a:after {
  display: inline-block;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  transition: transform 0.5s, opacity 0.3s;
}

.pacasead-benaprod a:before {
  margin-right: 10px;
  content: '«[';
  -webkit-transform: translate(15px);
  -moz-transform: translate(15px);
  transform: translate(15px);
}

.pacasead-benaprod a:after {
  margin-left: 5px;
  content: ']»';
  -webkit-transform: translate(-15px);
  -moz-transform: translate(-15px);
  transform: translate(-15px);
}

.pacasead-benaprod a:hover:before,
.pacasead-benaprod a:hover:after,
.pacasead-benaprod a:focus:before,
.pacasead-benaprod a:focus:after {
  opacity: 2;
  -webkit-transform: translate(0px);
  -moz-transform: translate(0px);
  transform: translate(0px);
}

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

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

16 Сентября 2018 Просмотров: 889 Комментариев: (0)

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

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

Kosten

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