Эффект Fade CSS3

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?

Благодаря!

    3 Solutions collect form web for “Эффект Fade CSS3”

    Вы не можете переходить между двумя фоновыми изображениями, так как браузер не знает, что вы хотите интерполировать. Как вы обнаружили, вы можете перейти к исходной позиции. Если вы хотите, чтобы изображение затухало при наведении мыши, я думаю, что лучший способ сделать это с помощью 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); } 

    Эффект прокрутки является причиной, определяя общее свойство «background» в вашем css вместо более конкретного фонового изображения. Устанавливая свойство фона, анимация будет переходить между всеми свойствами. Фоновый цвет, Фоновое изображение, Фоновая позиция и т. Д. Таким образом, вызывает эффект прокрутки.

    Например

     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; } 

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

     
  • и т.д…

    Где

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

    • LI получить position: relative;
    • Дайте тегу height , width
    • Установите width и height на 100%, чтобы оба и имели одинаковые размеры
    • Оба и получают position: relative; ,
    • Назначить одно и то же фоновое изображение для каждого элемента
    • Тег будет иметь положение «ВЫКЛ» в background-position , а будет иметь «ON» background-poisiton .
    • Для состояния «ВЫКЛ» используйте непрозрачность 0 для
    • Для «ВКЛ» :hover использование режима :hover использует непрозрачность 1 для
    • Установите переход -webkit или -moz в элемент

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

    Давайте будем гением компьютера.