Мне нужно изменить эффект наложения css на мою ссылку. Это мой HTML код:Модифицировать эффект гиперповерхности CSS Hover

<body> 
    <div class="button-holder"> 
     <div class="center-content"> 
      <a href="#" class="btn1"> 
       <span> Some Link </span> 
       <span> </span> 
      </a> 
     </div> 
    </div> 
</body>

Итак, эффект css работает с фоном ссылки. Как я могу изменить свой CSS, чтобы применить тот же эффект от «заполнения цветом» к цвету текста вместо фона? http://jsfiddle.net/yakovenkodenis/ryfyhLk7/ Вот нужный эффект, но он меняет фон, а не сам текст. Вот мой CSS код:

body { 
    padding: 100px; 
    text-align: center; 
} 
a { 
    color: #444; 
    display: inline-block; 
    font-size: 30px; 
    letter-spacing: .1em; 
    margin: 100px 0; 
    padding: 1em 2em; 
    text-decoration: none; 
} 
.button-holder > div > div, .button-holder > div > a { 
    -moz-box-sizing: border-box; 
    display: block; 
    float: left; 
    font-size: 2em; 
    height: 52px; 
    margin: 80px; 
    padding: 10px 30px; 
    position: relative; 
    width: 100%; 
} 
.center-content { 
    width: 840px; 
    margin: 0px auto; 
} 
.button-holder div a { 
    text-decoration: none; 
    color: rgba(0, 0, 0, 0.7); 
} 
.btn1 span { 
    -moz-box-shadow: none; 
    -moz-transform-origin: 0 0; 
    -moz-transform-style: preserve-3d; 
    -moz-transition: all 0.6s cubic-bezier(0.05, 0.06, 0.05, 0.95); 
    display: block; 
    left: 0; 
    opacity: 1; 
    padding: 9px 0; 
    position: absolute; 
    top: 0; 
    text-align: center; 
    color: #444; 
    box-shadow: none; 
} 
.btn1 { 
    overflow: hidden; 
} 
.btn1 span { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    display: block; 
    opacity: 1; 
    left: 0; 
    top: 0; 
    -moz-box-sizing: border-box; 
    padding: 9px 0; 
    text-align: center; 
    -moz-transform-style: preserve-3d; 
    -moz-transform-origin: 0 0; 
    -moz-transition: all 0.6s cubic-bezier(0.05, 0.06, 0.05, 0.95); 
    box-shadow: none; 
    color: #444; 
} 
.btn1 span:first-of-type { 
    z-index: 99999; 
} 
.btn1 span:last-of-type { 
    background: #1abc9c; 
    left: -100%; 
} 
.btn1:hover span { 
    left: 0; 
}

источник

2015-01-01 Denis Yakovenko

Мне очень жаль из-за такого смутного объяснения и так много кода. Надеюсь, вы по-прежнему можете помочь –

, почему вы решили иметь второй интервал, который вы перемещаете на паре? можете ли вы не просто иметь один и изменить цвет фона и текста на зависании? '.btn1: hover span {background: # 1abc9c; красный цвет; } ' – Rhumborl

Ну, если я удаляю второй прогон, он перестает работать :) (Код на самом деле не мой) –

Ok, это далеко не идеальное решение, но он демонстрирует принцип, лежащий в основе того, что я делаю.

Это сложно, потому что CSS не дает нам контроля над отдельными персонажами. Самый простой способ сделать это - сделать текст прозрачным, а затем использовать анимацию CSS3 для изменения background-color. У браузеров Webkit есть способ сделать это только в коде, но для резервного копирования вам нужно использовать JavaScript или графику с прозрачным текстом.

Код:

<div id="outer"> 
    <p>Some link</p> 
</div> 

#outer { 
    background:linear-gradient(to right, #1abc9c 50%, #444 50%); 
    background-size:200% 100%; 
    background-position:right bottom; 
    font-size:64px; 
    text-align:center; 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent; 
    transition:all 1s ease; 
} 
#outer:hover { 
    background-position:left bottom; 
    cursor:pointer; 
}

Я пользуясь -webkit-background-clip и -webkit-text-fill-color как описано в этой статье CSS Tricks. Webkit использует свойство CSS3, которое вырезает текст и позволяет отображать цвет или изображения сзади. Насколько я могу судить, это работает только в браузерах Webkit.

Затем я использовал свойство linear-gradient для фона. 50% из них соответствует цвету по умолчанию, остальные 50% - цвет вашего наведения. Когда вы наведите указатель на div, фон смещается, придавая внешнему виду текст с другим цветом.

Here's the CodePen Demo

Опять же, я проверил это только с WebKit. Если вы используете изображения с прозрачным текстом, вы можете добиться такого же эффекта.

источник

2015-01-01 22:16:42 Brian

Большое спасибо, вы бог css! :) По крайней мере, он работает в хроме! –

В статье, которую я связал, есть некоторые варианты резервного копирования, которые могут быть полезны. Обязательно прочтите это. Рад, что смог помочь! – Brian

Чтобы изменить цвет вашего текста в элементах на парения просто добавить color свойства к вашему .btn1:hover span селектору:

.btn1:hover span { left: 0; color: red; }

источник

2015-01-01 20:57:00

Я Бесполезный не изучайте все, что вы пытаетесь сделать, но это изменение работает:

и вот jsfiddle: http://jsfiddle.net/nq0s16q3/

.btn1:hover span { 
    color: blue; 
}

источник

2015-01-01 20:57:10 W3AVE

Ну, я бы не спросил, нужен ли мне только простой переход цвета :) Есть специальный эффект зависания для фона ссылки. Мне нужно сделать тот же эффект, но для самого текста, а не его фона. –

Каков эффект? Вы можете это показать? – W3AVE

http://jsfiddle.net/yakovenkodenis/ryfyhLk7/ Вот оно. Но он меняет фон. Мне нужно изменить цвет текста так же, как фона –

В вашем CSS у вас есть

.btn1 span:last of type { 
    background: #1abc9c; 
    left: 100%; 
}

вы можете попытаться изменить его

.btn1:hover span { 
    color: #1abc9c; 
    left: 100%; 
}

источник

2015-01-01 21:12:43

Это не помогло. Наверное, мне до сих пор не ясно, извините. Итак, есть эффект фонового наведения (зеленый цвет начинается с слева направо, когда он зависает). Мне нужно сделать тот же эффект с текстом вместо фона. Я хочу, чтобы он заполнялся зеленым цветом слева направо (только то, что происходит с фоном при наведении ссылки). http://jsfiddle.net/yakovenkodenis/ryfyhLk7/ –

Модифицировать эффект гиперповерхности CSS Hover

ответ

Here's the CodePen Demo

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