CSS анимированное меню

Question

Я пытаюсь получить что-то похожее на меню "поделиться этим в ..." здесь , но я не совсем понимаю, как они это делают, даже после просмотра их CSS. Я имею в виду тот факт, что изображения появляются при наведении.

Моя первая попытка будет выглядеть примерно так:

<div id="share_on">
    <ul>
        <li><a href="#"><img src="shareon-digg.png" /></a></li>
        <li><a href="#"><img src="shareon-reddit.png" /></a></li>
        ...
        <li><a href="#"><img src="shareon-stumbleupon.png" /></a></li>
    </ul>
</div>

и CSS:

#share_on {overflow: hidden}
#share_on ul {margin-bottom: -16px}
#share_on li {display: inline}
#share_on li:hover {margin-top: -16px}

Конечно, это не работает, поэтому я спрашиваю здесь. В неактивном состоянии отображается только половина значка, что является ожидаемым поведением. Но при наведении ничего не меняется. Я также попробовал некоторые варианты, такие как

#share_on li:hover {margin-bottom: 16px}

или

#share_on li:hover {padding-bottom: 16px}

но ни одна из этих работ. Есть идеи?

Answer 1

Одним из способов достижения подобного эффекта является следующий css:

ul.social
    {
    width: 50%;
    margin: 1em auto;
    }

ul.social li
    {
    display: inline-block;
    overflow: hidden;
    position: relative;
    height: 31px;
    width: 34px;
    border-bottom: 1px solid #ccc;
    }

ul.social li img
    {
    position: relative;
    margin-top: 16px;
    -webkit-transition: margin-top 0.5s linear;
    }

ul.social li img:hover
    {
    margin-top: 0;
    -webkit-transition: margin-top 0.5s linear;
    }

И HTML:

<ul class="social">
<li><a href="#" title="digg"><img src="img/digg.png" /></a></li>
<li><a href="#" title="facebook"><img src="img/fb.png" /></a></li>
</ul>

Демонстрационная страница на: http://www.davidrhysthomas.co.uk/so/social.html

Используемая мной анимация - -webkit-transition, которая, конечно, ограничена работой в браузерах Webkit (Chrome и Safari). Firefox получает измененную позицию, но для сглаживания перехода потребуется js / jQuery.

Стоит отметить, что сайт, на который вы ссылаетесь, использует css-sprite большого размера (http://angnetwork.com/ug/wp-content/plugins/sexybookmarks/images/sexy-sprite.png) для создания того же эффекта, но

Answer 2

Я нашел решение. Проблема только в том, что <li> является встроенным элементом. Следующие работы:

<div id="share_on">
    <div class="animated"><a href="#"><img src="shareon-digg.png" /></a></div>
    <div class="animated"><a href="#"><img src="shareon-reddit.png" /></a></div>
    ...
    <div class="animated"><a href="#"><img src="shareon-stumbleupon.png" /></a></div>
</div>

и для CSS:

#share_on {overflow: hidden}
.animated {float: left; margin-right: 5px; margin-bottom: -16px}
.animated img:hover {margin-top: -16px; margin-bottom: 16px}

Answer 3

Насколько я понимаю, вы говорите о анимированных скругленных квадратных значках, верно? Не копаясь вглубь кода, держу пари, что это делается с помощью jQuery. Поэтому я бы посоветовал вам искать там ответы.

http://jquery.com/

Answer 4

Они используют div с фоном, а не imgs. Не знаю, имеет ли это значение, мне не хочется сейчас пробовать это.

.button {
  position: fixed;
  z-index: 9999;
  background-image: url('whatever');
  margin-right: 0px;
  ...
}

.button:hover {
  margin-right: 1px;
}

Что-то вроде этого нужно сделать. По крайней мере, теоретически.