Thay đổi màu chữ hoạt ảnh động Slide

Question

Tôi có nút có màu nền trượt từ bên phải khi di chuột, hoạt động tốt, tuy nhiên tôi cũng cần màu văn bản để thay đổi. Tôi đã quản lý để có nó mờ đi, nhưng điều đó không hoạt động đúng. Những gì tôi muốn là một slide chuyển tiếp màu sắc từ bên phải trong buổi hòa nhạc với sự thay đổi nền.

.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>

Tôi đã thấy câu hỏi này, nhưng giải pháp duy nhất là không khả thi trong trường hợp này. Sliding in changing text color animation

Có một số mẹo CSS tôi bị thiếu không? Google tìm kiếm không dẫn đến bất cứ điều gì chỉ cho tôi đi đúng hướng, vì vậy tôi lo ngại tôi đang cố gắng không thể.

Tôi rất vui khi sử dụng JS hoặc jQuery nếu nó thực hiện được những gì tôi muốn.

Answer 1

này có thể được thực hiện bằng cách "kết hợp văn bản với nền", chính là tài sản background-clip, check this 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>

Answer 2

tôi không nghĩ rằng bạn sẽ có thể thực hiện điều này một cách trang nhã bằng cách sử dụng giải pháp css thuần túy vào lúc này. bộ lọc phông nền trông đầy hứa hẹn cho những gì bạn muốn đạt được - bạn sẽ từ từ phủ một phần tử bằng bộ lọc phông nền - điều này sẽ áp dụng bộ lọc cho văn bản khi bạn di chuyển trên đó.

Kiểm tra hiểu thêm ở đây https://webkit.org/demos/backdrop-filter/

Answer 3

Chỉ cần cung cấp một thay thế bằng cách sử dụng các phần tử giả. Hoạt động tốt trên chrome.

.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>