0

Доброго всем. Я в веб-дизайне без году неделя. Два дня игрался, копируя шапку из одного сайта. И то вышло не до конца. Надеюсь вы поможете прояснить вопрос, который меня интерисует. Как сделать анимацию при наведении, как у значков соц. сетей в левом верхнем углу и индикатор меню. Я так понимаю, это нужно как-то в Js извращаться (там вообще не ступала нога меня), или можно все html-css обрисовать? С-венно ссылка : http://www.kriesi.at/themes/eunoia

2 ответа 2

3

В интернете полным полно разных туториалов по css-анимациям. Вот, к примеру, хороший ресурс http://learn.shayhowe.com/advanced-html-css/transitions-animations/ А это решение именно вашего вопроса:

body{
  background-color: #f0f0f0;
}
.icon{
  position: relative;
  margin-top: 50px;
  padding: 10px;
  color: #a7a7a7;
  font-size: 1.5em;
  transition: all 0.3s ease;
}
.icon .fa{
  position: relative;
  z-index: 1;
}
.icon:after{
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  height: 0;
  width: 0;
  background-color: #fff;
  transition: all 0.2s ease;
}
.icon:hover{
  border-radius: 50%;
  color: #fff;
}
.icon:hover:after{
  background-color: #e44885;
  height: 100%;
  width: 100%;
}
<link rel="stylesheet" href="
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" />

<a href="#" class="icon"><i class="fa fa-twitter" aria-hidden="true"></i></a>

2

Когда интересно, как свёрстан какой-нибудь элемент на странице, можно просмотреть его код и разметку. (Например, в Chrome и подобных браузерах для этого в контекстном меню есть пункт «Просмотреть код элемента» или подобный.) Таким образом, можно быстро научиться эффектам, интересным конкретно для Вас. Всё, что пока неизвестно, элементарно отыскивается в поисковике.

Для анимации нужного элемента страницы (без использования скриптов) по наведению курсора пишется CSS-разметка для псевдокласса :hover этого элемента. По сути там всего лишь меняются некоторые параметры (например, цвет фона, толщина границ, местоположение, возможно, лёгкий поворот или масштаб...) и задаётся свойство transition-duration с нужной длительностью плавного перехода.

В общем, пробуйте, там всё просто.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.