Изменить цвет шрифта буква буквами одним словом на hover

Я хочу изменить цвет каждой буквы одним словом при наведении мыши.Изменить цвет шрифта буква буквами одним словом на hover

Я использую переход для этого, но я хочу, чтобы это изменение происходило плавно слева направо, но я не знаю, почему функция синхронизации времени просто не работает. Я хочу изменить цвет моих букв таким образом, чтобы элемент div перемещался.

Первый в этом месте является то, что я хочу: http://tympanus.net/Development/TextStylesHoverEffects/

<style> 
    p { 
     transition: all 0.5s ease-in; 
    } 

    div { 
     width: 100px; 
     height: 100px; 
     background: red; 
     position: relative; 
     -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */ 
     -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */ 
     animation: mymove 5s infinite; 
     animation-timing-function: linear; 
    } 

    .a:hover{ 
     color: cyan; 
    } 

    @-webkit-keyframes mymove { 
     from { 
      left: 0px; 
     } 

     to { 
      left: 200px; 
     } 
    } 

    @keyframes mymove { 
     from { 
      left: 0px; 
     } 

     to { 
      left: 200px; 
     } 
    } 
</style> 

<body> 
    <p class="a">HelloGolnaz</p> 

    <div></div> 
</body>

Извините, если это простой вопрос и спасибо.

источник

2016-08-01 Golnaz Asadollahzadeh

вам придется создавать отдельные элементы для каждой буквы или используйте некоторый JavaScript – Li357

Вы можете использовать два div сек один над другим, чтобы создать такой эффект:

.default, 
 
.hover { 
 
    font-size: 18px; 
 
    font-weight: bold; 
 
    color: #787878; 
 
} 
 
.hover { 
 
    overflow: hidden; 
 
    width: 0; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    color: #050; 
 
    transition: width .5s ease-in-out; 
 
    white-space: nowrap; 
 
} 
 
.wrapper { 
 
    position: relative; 
 
} 
 
.wrapper:hover .hover { 
 
    width: 100%; 
 
}

<div class="wrapper"> 
 
    <div class="default">SOME WORD HERE</div> 
 
    <div class="hover">SOME WORD HERE</div> 
 
</div>

источник

2016-08-01 07:11:02 Justinas

Большое вам спасибо, если я хочу использовать этот эффект для своих элементов панели навигации, мне нужно установить свойство left и top для каждого элемента в классе, например, наведите указатель мыши? –

@GolnazAsadollahzadeh Да, но если все элементы имеют одинаковое смещение от 'wrapper', вы можете установить его только один раз – Justinas

Прежде всего я хочу сказать, что @justinas's answer это правильный ответ, но я просто хотел, чтобы изменить свой ответ немного, чтобы использовать функцию steps() в анимации CSS вместо перехода CSS, так что похоже, что она заполняется буквами по буквам.

Обратите внимание, что для имитации его количество шагов должно быть таким же, как количество букв

jsFiddle

.default, 
 
.hover { 
 
    font-size: 18px; 
 
    font-weight: bold; 
 
    color: #787878; 
 
    cursor:pointer; 
 
} 
 
.hover { 
 
    overflow: hidden; 
 
    width: 0; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    color: navy; 
 
    white-space: nowrap; 
 
} 
 
.wrapper { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.wrapper:hover .hover { 
 
    width: 100%; 
 
    animation: stagger 2s steps(14); 
 
} 
 
@keyframes stagger { 
 
    from {width: 0;} 
 
    to {width: 100%;} 
 
}

<div class="wrapper"> 
 
    <div class="default">SOME WORD HERE</div> 
 
    <div class="hover">SOME WORD HERE</div> 
 
</div>

источник

2016-08-01 08:54:32

спасибо вам огромное, что тоже было потрясающе –

@GolnazAsadollahzadeh, пожалуйста, но я разместил его как измененную версию ответа судьи, то, что я сказал в своем посте, и я не хотел, чтобы этот ответ был проверенным, так что бы вы, пожалуйста, вернули ответ оправданий как правильный. –

еще раз спасибо @ Mi-Creativity, есть ли способ изменить направление изменения цвета? –

Изменить цвет шрифта буква буквами одним словом на hover

ответ

Смежные вопросы