ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект скручивания угла при наведение CSS3

Эффект скручивания угла при наведение CSS3

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

Чтобы добавить эффект эффекта на любой заданной страницы, то есть когда вы наведите указатель на область области, вы увидите, как будет реально срабатывать эффект по умолчанию. Этот эффект выполняется с использованием языка HTML и CSS, а вот jQuery здесь не предусмотрен, все работает на чистом стиле. Поэтому давайте начнем установку, так как она не сложная, вам нужно выбрать, в каком углу будет значок, и вверх сайта его устанавливаем. Также рекомендуем посмотреть демонстрационную, что ссылка ниже прописана, где вы увидите этот эффект по правой и левой стороне.

HTML

Код

CSS

Код

.klusmatelingesad {
  width: 65px;
  height: 65px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
  overflow: hidden;
  background: #fdf7f7;
  box-shadow: 0 0 15px #585151;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.klusmatelingesad .detoranaulesen{
  position: absolute;
  left: 17px;
  top: 17px;
}

.klusmatelingesad:after {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transform: rotate(45deg) translateX(70%) scale(1.4);
  background: #584d4d;
  background: -moz-linear-gradient(left, #afafaf 0%, #ffffff 29%);
  background: -webkit-linear-gradient(left, #bbacac 0%,#dcd5d5 29%);
  background: linear-gradient(to right, #a59999 0%,#f3f1f1 29%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afafaf', endColorstr='#eceaea',GradientType=1 );
}

.klusmatelingesad:hover{
  width: 100px;
  height: 100px;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
  box-shadow: 9px 9px 49px gray;
}

Как оказалось, что такой материал уже есть на сайте, в этом материале, там можете посмотреть на 2 элемента, как здесь сделан на один угол.

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

20 Июня 2018 Просмотров: 1198 Комментариев: (0)

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

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

Kosten

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