Slayt animasyon metni renk değişimi

Arka planda renk slaydı olan ve düğmenin üzerinde sağda bulunan bir düğmem var, bu da iyi çalışıyor ancak metin rengini de değiştirmem gerekiyor. Solmaya çalıştım ama bu düzgün çalışmıyor. İstediğim şey arka plan değişikliğiyle uyumlu olarak sağdan bir renk geçiş slaydı. Ben bu soruyu gördük Slayt animasyon metni renk değişimi

.slideybutton { 
 
    background-size: 200% 100%; 
 
    background-image: linear-gradient(to right, white 50%, blue 50%); 
 
    transition: background-position 1s linear, color 1s linear; 
 
    color: blue; 
 
} 
 
.slideybutton:hover { 
 
    background-position: -100% 0; 
 
    color: white; 
 
}

<a class="slideybutton"> 
 
Lorem ipsum dolor sit amet. 
 
</a>

fakat tek çözüm bu durumda olanaksız olduğunu. Sliding in changing text color animation

Eksik olduğum bir CSS numarası var mı? Google aramaları beni doğru yönde işaret eden bir şeyle sonuçlanmaz, bu yüzden imkansızı denemekten endişe duyuyorum.

İstediğim şeyi gerçekleştirecekse JS veya jQuery'yi kullanmaktan mutluluk duyuyorum.

kaynak

2016-12-09 Geoff Atkins

bir degrade moda bir elementin bütün metin içeriğini renklendirmek hiçbir basit CSS özelliği yoktur; Bir çeşit (SVG) filtre veya sth kullanmanız gerekecektir. bunun gibi. – CBroe

Yeniden oluşturdum ve bilgisayarımda çalışıyor. Önbelleği boşaltmayı ve öznitelikleri engelleyen bir şey olup olmadığını kontrol etmeyi deneyin. – Bolphgolph

Üzgünüm, sorumu yanlış anladım. – Bolphgolph

Bu "arka plan ile metin birleştirerek" tarafından yapılabilirdi daha, anahtar özellik background-klip olduğunu, bu check out:

.slideybutton { 
 
    background-size: 200% 100%; 
 
    background-image: linear-gradient(to right, blue 50%, white 50%), 
 
        linear-gradient(to right, white 50%, blue 50%); 
 
    transition: background-position 1s linear; 
 
    -webkit-background-clip: text, border-box; 
 
    background-clip: text, border-box; 
 
    color: transparent; 
 

 
} 
 
.slideybutton:hover { 
 
    background-position: -100% 0; 
 
}

<a class="slideybutton"> 
 
Lorem ipsum dolor sit amet. 
 
</a>

kaynak

2016-12-09 13:01:27

Harika bir çözüm, '' sonra '' ve '' önce '' ile dolaşıyordum ama bu kadar katı olmazdı. – Roberrrt

Bu harika. Teşekkür ederim. –

SO üzerinde başlamanın bir yolu. Fantastik cevap. –

Şu anda saf bir css çözümü kullanarak bunu zarif bir şekilde yapabileceğinizi düşünmüyorum. zemin filtreleri, elde etmek istediğiniz şey için ümit verici görünmektedir - yavaş yavaş bir arka plan filtresine sahip bir öğeyi kaplarsınız - bu, filtreyi metne aktarırken metne uygular.

Kontrol burada https://webkit.org/demos/backdrop-filter/

kaynak

2016-12-09 12:53:56 hairmot

Sadece sahte öğeler kullanarak bir alternatif sağlayın. Kromda iyi çalışıyor.

.slideybutton { 
 
    position: relative; 
 
} 
 
.slideybutton:hover { 
 
    /* to fix a bug in IE */ 
 
} 
 
.slideybutton:hover::after { 
 
    width: 100%; 
 
} 
 
.slideybutton::before { 
 
    content: attr(title); 
 
    color: blue; 
 
} 
 
.slideybutton::after { 
 
    content: attr(title); 
 
    position: absolute; 
 
    left: 0; 
 
    width: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    color: white; 
 
    transition: width 1s linear; 
 
    background-color: blue; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
}

<a class="slideybutton" title="Lorem ipsum dolor sit amet."> 
 

 
</a>

kaynak

2016-12-09 13:17:26

Ben de böyle yapmıştım. –

Slayt animasyon metni renk değişimi

cevap

İlgili konular