CSS3 Fade Effect - PullRequest
Новая
       23

CSS3 Fade Effect

15 голосов
/ 20 июня 2010 
a {
    float: left;
    width: 32px;
    height: 32px;
    text-align: left;
    text-indent:-9999px;
    background: url('../img/button.png') no-repeat 0 0;

    -webkit-transition: background 300ms ease-in 2s; /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 2s;
    -o-transition: background 300ms ease-in 2s;
    transition: background 300ms ease-in 2s;


    -webkit-transition-property: background;
    -webkit-transition-duration: 300ms;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-delay: 100ms;

    -moz-transition-property: background;
    -moz-transition-duration: 300ms;
    -moz-transition-timing-function: ease-in;
    -moz-transition-delay: 100ms;

    -o-transition-property: background;
    -o-transition-duration: 300ms;
    -o-transition-timing-function: ease-in;
    -o-transition-delay: 100ms;

    transition-property: background;
    transition-duration: 300ms;
    transition-timing-function: ease-in;
    transition-delay: 100ms;

}

a:hover {
    background:position: 0 -32px;
}

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

Спасибо! * * 1004

Ответы [ 3 ]

25 голосов
/ 26 июня 2010

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

span {
    background: url(button.png) no-repeat 0 0;
}
a {
    width: 32px;
    height: 32px;
    text-align: left;
    background: rgb(255,255,255);

    -webkit-transition: background 300ms ease-in 200ms; /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 200ms;
    -o-transition: background 300ms ease-in 200ms;
    transition: background 300ms ease-in 200ms;
    }
a:hover {
    background: rgba(255,255,255,0);
}
4 голосов
/ 11 февраля 2011

Эффект прокрутки вызывается указанием общего свойства background в вашем css вместо более конкретного background-image.Установив свойство background, анимация будет переходить между всеми свойствами .. Background-Color, Background-Image, Background-Position .. и т. Д. Таким образом, вызывая эффект прокрутки ..

Например 

a {
-webkit-transition-property: background-image 300ms ease-in 200ms;
-moz-transition-property: background-image 300ms ease-in 200ms;
-o-transition-property: background-image 300ms ease-in 200ms;
transition: background-image 300ms ease-in 200ms;
}
3 голосов
/ 29 декабря 2010

Возможно, используйте следующую структуру: 

<li><a><span></span></a></li>
<li><a><span></span></a></li>

и т. Д. *

Где <li> содержит тег привязки <a>, который содержит диапазон, как показано выше.Затем вставьте следующий код:

  • LI get position: relative;
  • Give <a> tag height, width
  • Set <span> *От 1020 * & height до 100%, так что <a> и <span> имеют одинаковые размеры
  • Оба <a> и <span> get position: relative;.
  • Назначьтеодно и то же фоновое изображение для каждого элемента
  • <a> тег будет иметь значение «OFF» background-position, а <span> будет иметь значение «ON» background-poisiton.
  • For «OFF»'непрозрачность состояния использования 0 для <span>
  • для' ВКЛ ':hover непрозрачность состояния использования 1 для <span>
  • Установите переход -webkit или -moz на <span> element

У вас будет возможность использовать эффект перехода, в то время как по умолчанию используется старый background-position своп.Не забудьте вставить альфа-фильтр IE.

...