» »

Необычный эффект анимации с помощью CSS

Необычный эффект анимации с помощью CSS

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

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

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

По умолчанию идет в таком дизайн:

Эффект поворота кнопки с помощью CSS3

HTML

Код
<a class="begunaga_masekus_production" href="http://zornet.ru">Сделать красивые гиперссылки с помощью CSS</a>


CSS

Код
a.begunaga_masekus_production {
  display: inline-block;
  padding: 31px 57px;
  border: 2px solid #fafdf7;
  background: #1d6277;
  color: #f5ebeb;
  font-size: 21px;
  text-align: center;
  text-shadow: 0.5px 0.5px 0px #63635d;
  filter: dropshadow(color=#9c9e98, offx=1, offy=1);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: -1px 4px 8px 1px #a5a7a1;
  -moz-box-shadow: -1px 4px 8px 1px #989f8e;
  box-shadow: -1px 3px 7px 2px #676963;
}

a.begunaga_masekus_production:hover, a.begunaga_masekus_production:focus {
  background: #08485d;
  color: #d8cf58;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

@-webkit-keyframes pulse {
  0% {
  -webkit-transform: scale(1);
  }
  50% {
  -webkit-transform: scale(1.1);
  }
  100% {
  -webkit-transform: scale(1);
  }
}
@-moz-keyframes pulse {
  0% {
  -moz-transform: scale(1);
  }
  50% {
  -moz-transform: scale(1.1);
  }
  100% {
  -moz-transform: scale(1);
  }
}
@-ms-keyframes pulse {
  0% {
  -ms-transform: scale(1);
  }
  50% {
  -ms-transform: scale(1.1);
  }
  100% {
  -ms-transform: scale(1);
  }
}
@-o-keyframes pulse {
  0% {
  -o-transform: scale(1);
  }
  50% {
  -o-transform: scale(1.1);
  }
  100% {
  -o-transform: scale(1);
  }
}
@keyframes pulse {
  0% {
  transform: scale(1);
  }
  50% {
  transform: scale(1.1);
  }
  100% {
  transform: scale(1);
  }
}

/* transform */
.begunaga_masekus_production:hover, .begunaga_masekus_production:focus {
  -moz-transform: scale(0.95) rotate(10deg) translate(25px);
  -webkit-transform: scale(0.95) rotate(10deg) translate(25px);
  -o-transform: scale(0.95) rotate(10deg) translate(25px);
  transform: scale(0.95) rotate(10deg) translate(25px);
}

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

Демонстрация
01.07.2018 Просмотров: 265 Комментарий: (2)

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

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

Комментарий: 2
CbIPoK2513
CbIPoK2513 01.07.2018 09:441
0
Я бы не стал использовать такие эффекты)
Не все наводят в центр блока, а если навести вне его, то когда край блока уходит с курсора - то пропадает :hover и анимация возвращается обратно, снова попадает на курсор, появляется :hover, и мы получаем "дёрганный" блок :D
Kosten
Kosten 01.07.2018 15:162
0
Смотря на каком браузере, если смотреть с Хром, то когда наводишь и элемент отъезжает, то клик остается, хотя уже на нем не находится.
avatar