CSS3 - Фоновая позиция слайда перехода -

Question

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

Вот мой код:

body { 
 
    background-color: rgb(6, 7, 11); 
 
} 
 
.bar-logout { 
 
    float: left; 
 
    background: rgb(7, 8, 13); 
 
    width: auto; 
 
    height: 40px; 
 
    border-bottom: 1px solid rgb(112, 101, 58); 
 
    cursor: pointer; 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -moz-transition: all 0.5s ease-in-out; 
 
    -ms-transition: all 0.5s ease-in-out; 
 
    -o-transition: all 0.5s ease-in-out; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 
.bar-logout span { 
 
    float: right; 
 
    padding: 6px 10px 6px 10px; 
 
} 
 
.bar-logout span span.logout { 
 
    font-family: "Trebuchet MS", Helvetica, sans-serif; 
 
    font-size: 11px; 
 
    font-weight: bold; 
 
    color: rgb(164, 157, 139); 
 
    padding-top: 9px; 
 
    text-shadow: 0px 2px 3px rgb(0, 0, 0); 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -moz-transition: all 0.5s ease-in-out; 
 
    -ms-transition: all 0.5s ease-in-out; 
 
    -o-transition: all 0.5s ease-in-out; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 
.bar-logout span span.logout .logout-icon { 
 
    float: left;position:relative;bottom:2px;background-image:url('http://i.imgur.com/eCXybOC.png');background-repeat:no-repeat;background-position:0 -16px;margin:0 8px 0 0;width:16px;height:16px;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; } 
 
    .bar-logout: hover { 
 
    border-bottom: 1px solid rgb(200, 180, 85); 
 
    } 
 
    .bar-logout:hover > span span.logout .logout-icon { 
 
    background-position: 0 0; 
 
    }

<div class="bar-logout"> 
 
    <span> 
 
    <span class="logout"><div class="logout-icon"></div>LOGOUT</span> 
 
    </span> 
 
</div>

Answer 1

Я не думаю, что можно добиться эффекта затухания/выпадения (который вы пытаетесь создать) с использованием одного элемента, когда фоновые изображения являются частью спрайта. Это связано с тем, что спрайт всегда будет нуждаться в движении слайдов. Чтобы движение слайдов было невидимым и исчезло, нам нужно больше одного изменения состояния - (1) затухать текущее изображение (opacity: 0), (2) изменить background-position в правильное положение (3) затухать изображение (opacity: 1). Поскольку для этого требуется больше, чем изменение непрозрачности, оно не может быть достигнуто при переходе на один элемент. (Примечание: Это может быть сделано с анимацией).

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

Эффект похож на тот, на границе нижней: (то есть, иконка выглядит как она меняется цвет)

Это делается путем добавления цветной значок серый поверх окрашенного желтым значком (используя псевдоэлемент), а затем изменяя его opacity на 0 при наведении. Изменение непрозрачности означает, что значок желтого цвета внизу отображается во время включения зависания.

body { 
 
    background-color: rgb(6, 7, 11); 
 
} 
 
.bar-logout { 
 
    float: left; 
 
    background: rgb(7, 8, 13); 
 
    width: auto; 
 
    height: 40px; 
 
    border-bottom: 1px solid rgb(112, 101, 58); 
 
    cursor: pointer; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 
.bar-logout span { 
 
    float: right; 
 
    padding: 6px 10px 6px 10px; 
 
} 
 
.bar-logout span span.logout { 
 
    font-family: "Trebuchet MS", Helvetica, sans-serif; 
 
    font-size: 11px; 
 
    font-weight: bold; 
 
    color: rgb(164, 157, 139); 
 
    padding-top: 9px; 
 
    text-shadow: 0px 2px 3px rgb(0, 0, 0); 
 
    transition: all 0.5s ease-in-out; 
 
} 
 
.bar-logout span span.logout .logout-icon { 
 
    float: left; 
 
    position: relative; 
 
    bottom: 2px; 
 
    background-image: url('http://i.imgur.com/eCXybOC.png'); 
 
    background-repeat: no-repeat; 
 
    background-position: 0 0px; 
 
    margin: 0 8px 0 0; 
 
    width: 16px; 
 
    height: 16px; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 
.bar-logout span span.logout .logout-icon:after { 
 
    position: absolute; 
 
    content: ''; 
 
    background-image: url('http://i.imgur.com/eCXybOC.png'); 
 
    background-repeat: no-repeat; 
 
    background-position: 0 -16px; 
 
    width: 100%; 
 
    height: 100%; 
 
    transition: all 0.5s ease-in-out; 
 
    z-index: 1; 
 
} 
 
.bar-logout:hover { 
 
    border-bottom: 1px solid rgb(200, 180, 85); 
 
} 
 
.bar-logout:hover > span span.logout .logout-icon:after { 
 
    opacity: 0; 
 
}

<div class="bar-logout"> 
 
    <span> 
 
<span class="logout"><div class="logout-icon"></div>LOGOUT</span> 
 
    </span> 
 
</div>

---

Фактическое нарастающий/выход эффект: (то есть серый значок гаснет, желтый затухает-в на парении и наоборот)

Этот снова добавляется значок серого цвета поверх желтого значка (с использованием псевдоэлемента) и при наведении, серый значок opacity сначала изменяется на 0, а затем после задержки желтый значок opacity изменяется на 1 (это достигается с использованием transition-delay, равным transition-duration).

body { 
 
    background-color: rgb(6, 7, 11); 
 
} 
 
.bar-logout { 
 
    float: left; 
 
    background: rgb(7, 8, 13); 
 
    width: auto; 
 
    height: 40px; 
 
    border-bottom: 1px solid rgb(112, 101, 58); 
 
    cursor: pointer; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 
.bar-logout span { 
 
    float: right; 
 
    padding: 6px 10px 6px 10px; 
 
} 
 
.bar-logout span span.logout { 
 
    position: relative; 
 
    font-family: "Trebuchet MS", Helvetica, sans-serif; 
 
    font-size: 11px; 
 
    font-weight: bold; 
 
    color: rgb(164, 157, 139); 
 
    padding-top: 9px; 
 
    text-shadow: 0px 2px 3px rgb(0, 0, 0); 
 
    transition: all 0.5s ease-in-out; 
 
} 
 
.bar-logout span span.logout .logout-icon { 
 
    float: left; 
 
    position: relative; 
 
    bottom: 2px; 
 
    background-image: url('http://i.imgur.com/eCXybOC.png'); 
 
    background-repeat: no-repeat; 
 
    background-position: 0 0px; 
 
    margin: 0 8px 0 0; 
 
    width: 16px; 
 
    height: 16px; 
 
    opacity: 0; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 
.bar-logout span span.logout:before { 
 
    float: left; 
 
    position: absolute; 
 
    content: ''; 
 
    left: 10px; 
 
    bottom: 8px; 
 
    background-image: url('http://i.imgur.com/eCXybOC.png'); 
 
    background-repeat: no-repeat; 
 
    background-position: 0 -16px; 
 
    margin: 0 8px 0 0; 
 
    width: 16px; 
 
    height: 16px; 
 
    transition: all 0.5s ease-in-out 0.5s; 
 
    z-index: 1; 
 
} 
 
.bar-logout:hover { 
 
    border-bottom: 1px solid rgb(200, 180, 85); 
 
} 
 
.bar-logout:hover > span span.logout:before { 
 
    opacity: 0; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 
.bar-logout:hover > span span.logout .logout-icon{ 
 
    opacity: 1; 
 
    transition: all 0.5s ease-in-out 0.5s; 
 
}

<div class="bar-logout"> 
 
    <span> 
 
    <span class="logout"><div class="logout-icon"></div>LOGOUT</span> 
 
    </span> 
 
</div>

Answer 2

EDIT: Основываясь на ваш комментарий

Вот фрагмент

body { background-color:rgb(6,7,11); } 
 
.bar-logout { float:left;background:rgb(7,8,13);width:auto;height:40px;border-bottom:1px solid rgb(112,101,58);cursor:pointer;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; } 
 
.bar-logout span { float:right;padding:6px 10px 6px 10px; } 
 
.bar-logout span span.logout { font-family:"Trebuchet MS",Helvetica,sans-serif;font-size:11px;font-weight:bold;color:rgb(164,157,139);padding-top:9px;text-shadow:0px 2px 3px rgb(0,0,0);-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; } 
 
.bar-logout span span.logout .logout-icon { float:left;position:relative;bottom:2px;background-image:url('http://i.imgur.com/eCXybOC.png');background-repeat:no-repeat;background-position:0 -16px;margin:0 8px 0 0;width:16px;height:16px;-webkit-transition:opacity 0.5s ease-in-out;-moz-transition:opacity 0.5s ease-in-out;-ms-transition:opacity 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;opacity:0; } 
 
.bar-logout:hover { border-bottom:1px solid rgb(200,180,85); } 
 
.bar-logout:hover > span span.logout .logout-icon { opacity:1 }

<div class="bar-logout"> 
 
<span> 
 
<span class="logout"><div class="logout-icon"></div>LOGOUT</span> 
 
</span> 
 
</div>