Блог

Главная - Вопросы по программированию - CSS3 переход положения фонового изображения

CSS3 переход положения фонового изображения

#css #background-image #transition

#css #background-image #переход

Вопрос:

Я хочу эффект наведения CSS3 на логотип моего веб-сайта. Просто, не так ли? Что ж, это работает, но не так, как я хочу.

Ссылка на мой логотип

Верхняя половина этого является обычным состоянием, а нижняя половина — состоянием: hover.

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

Возможно ли это при работе с одним изображением и двумя позициями или мне придется создавать два отдельных изображения (чего не происходит)?

Комментарии:

1. Я думаю, два. CSS3 не является заменой JS…

2. я не совсем понимаю, чего вы пытаетесь достичь, можете ли вы привести рабочий пример (или, по крайней мере, уточнить немного больше — вы хотите, чтобы ваше изображение меняло только верхнюю половину, или вы хотите, чтобы ваше изображение исчезло, а новое изображение исчезло)?

3. Я создал страницу, чтобы продемонстрировать свою ситуацию. scferg.com/logoexamples.html

4. Вам нужно как минимум 2 элемента. 1-й накладывается на 2-й. при 1-м наведении курсора мыши непрозрачность 1-го изменяется на 0 => 2-й отображается с «исчезновением». Вы можете использовать тот же фон (рекомендуется) и просто поиграть с фоновыми позициями.

Ответ №1:

Вам не нужны два отдельных изображения, но вам нужны два отдельных элемента для размещения вашего логотипа.

Смотрите текущую версию здесь:http://jsfiddle.net/BdY79

 .logo {
  width: 282px;
  height: 69px;
  background: #fff url(http://scferg.com/wp-content/themes/austere/images/logo.png) 0 -69px no-repeat;
  overflow: hidden;
}

.logo img {
  background-color: #fff;
  -webkit-transition: opacity 200ms ease;
  -moz-transition: opacity 200ms ease;
  -o-transition: opacity 200ms ease;
}

.logo img:hover {
  opacity: 0;
}

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

Ответ №2:

Здесь не упоминается анимация положения фона…

 .box {
    display:block;
    height:300px;
    width:300px;
    background:url('http://lorempixum.com/300/300') no-repeat;
    background-position:-300px;
    -webkit-transition:background-position 1s ease;
}

.box:hover{
    background-position:0px;
}

Только для Webkit 🙁

Через:http://jsfiddle.net/hfXSs

Подробнее здесь:http://css-tricks.com/parallax-background-css3

Ответ №3:

Да, это возможно, но вы не можете использовать простой переход, вам придется использовать анимацию CSS с 4 ключевыми кадрами

 0%   - opacity 1
49%  - opacity 0
50%  - move to new position, opacity 0
100% - opacity 1

Ответ №4:

https://gordonlesti.com/css-background-transitions-with-image-sprites/

 <style>
    .example4 {
        background: url(sprite.png) 0px 0px no-repeat;
        position: relative;
        width: 200px;
        height: 200px;
    }
    .example4::after {
        content: "";
        background: url(sprite.png) -200px 0px no-repeat;
        opacity: 0;
        transition: opacity 0.5s;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    .example4:hover::after {
        opacity: 1;
        transition: opacity 0.5s;
    }
</style>

<div class="example4"></div>