Справка по переходам CSS3

Кажется, я не могу понять это, но я уверен, что это довольно просто.

В основном у меня есть такой текст: DJDM, это мои инициалы. Что я пытаюсь сделать, так это сделать так, чтобы при наведении курсора на одну из букв рядом с ней появлялось полное имя с использованием переходов CSS3. Так что, если вы наведете курсор на букву D, вы получите DanielJDM.

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

Я уверен, что есть способ сделать это, я просто не могу понять это прямо сейчас.

Буду признателен за помощь! Спасибо.


css transitions
person DJDMorrison    schedule 08.09.2011    source источник
comment
Что у вас есть до сих пор? Вы можете показать нам здесь: jsfiddle.net   -  person thirtydot    schedule 08.09.2011

Ответы (2)


arrow_upward
1
arrow_downward

Вот еще один пример. Я не использовал элементы span, поэтому HTML меньше. Там также нет стилей css, кроме самого минимума, чтобы получить функциональность, которую вы ищете.

http://jsfiddle.net/bGYkB/

html:

<div class="name-container">
    <p>Daniel</p>
    <p>Jiminy</p>
    <p>Daniel</p>
    <p>McLastname</p>
</div>

CSS

.name-container{
    display:block;
    float:left;
}

.name-container p{
    display:block;
    float:left;
    overflow:hidden;
    color:rgba(0,0,0,0);
    width:15px;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
}

.name-container p:first-letter{
    color:rgba(0,0,0,1);
}

.name-container p:hover{
    width:80px;
    color:rgba(0,0,0,1);
}
person DuMaurier    schedule 08.09.2011
comment
Это блестящее использование :first-letter! Никогда об этом не думал! Спасибо за отличный ответ. - person DJDMorrison; 09.09.2011

arrow_upward
1
arrow_downward

Вот решение, которое далеко от совершенства (оно часто мерцает), но должно помочь вам начать работу в правильном направлении:

HTML:

<span class="parent"><span class="initial">D</span><span class="full">aniel</span></span>
<span class="parent"><span class="initial">J</span><span class="full">ohn</span></span>
<span class="parent"><span class="initial">D</span><span class="full">avid</span></span>
<span class="parent"><span class="initial">M</span><span class="full">aniel</span></span>

CSS:

body {
    font-size: 30px;
}
span.parent {
    padding: 0 5px;
}
span.full {
    opacity: 0;
    width: 0;
    display: inline-block;
    transition: opacity 0.5s;
    transition: width 0.2s;
}
span:hover span.full {
    opacity: 1;
    width: 50px;
}

http://jsfiddle.net/HjCen/

person Joseph Silber    schedule 08.09.2011