Hướng dẫn css animate text color change left to right - thay đổi màu văn bản động css từ trái sang phải

Tôi đang cố gắng làm động văn bản có lớp

<div class="outPop">
<div class="popUpWord">
  Text
</div>
</div>
3. Khi di chuột, tôi muốn thực hiện một hình ảnh động màu với màu của văn bản thay đổi từ trái sang phải.

<span class="popUpWord">hello</span>

Những gì tôi muốn làm là tương tự như văn bản này - Animate Text Fill từ trái sang phải, nhưng tôi muốn nó được điền vào từ trái sang phải và dừng lại, thay vì lặp lại nó.stop, rather than repeating it.

Điều này có thể thông qua CSS xin vui lòng?

Hướng dẫn css animate text color change left to right - thay đổi màu văn bản động css từ trái sang phải

Đã hỏi ngày 29 tháng 11 năm 2016 lúc 21:05Nov 29, 2016 at 21:05

7

Thêm một div bên ngoài Thêm

<div class="outPop">
<div class="popUpWord">
  Text
</div>
</div>
4 khi
<div class="outPop">
<div class="popUpWord">
  Text
</div>
</div>
5

.popUpWord {
  text-transform: uppercase;
  font: bold 26vmax/.8 Open Sans, Impact;
  background: black;
  display: table;
  color: white;
}

.outPop:hover {
  margin: auto;
  background: linear-gradient( crimson , crimson) white no-repeat 0 0;
  background-size: 0 100%;
  animation: stripes 2s linear 1 forwards;
}
.outPop:hover .popUpWord{
  mix-blend-mode: multiply;
}

@keyframes stripes {
  to {
    background-size:100% 100%;
  }
}

body {
  float:left;
  height: 100%;
  background: black;
}
<div class="outPop">
<div class="popUpWord">
  Text
</div>
</div>

Đã trả lời ngày 29 tháng 11 năm 2016 lúc 21:43Nov 29, 2016 at 21:43

Hướng dẫn css animate text color change left to right - thay đổi màu văn bản động css từ trái sang phải

JAFARBTECHJAFARBTECHjafarbtech

6.5921 Huy hiệu vàng35 Huy hiệu bạc55 Huy hiệu Đồng1 gold badge35 silver badges55 bronze badges

5

Tôi tình cờ phát hiện ra những năm nay sau khi nó được trả lời. Câu trả lời được chấp nhận không hoạt động với các màu nền khác nhau theo như tôi có thể nói. Ví dụ, tôi đã thử nó với nền màu xám đen và nó tạo ra một hộp tối phía sau văn bản mà tôi không muốn.

Tôi tìm kiếm các giải pháp khác và tìm thấy cái này. Về cơ bản, bạn có hai trường hợp của cùng một văn bản được định vị chính xác trên đầu nhau. Văn bản được định vị bằng cách sử dụng

<div class="outPop">
<div class="popUpWord">
  Text
</div>
</div>
6 của CSS-GRID và có
<div class="outPop">
<div class="popUpWord">
  Text
</div>
</div>
7 với chiều rộng 0.

Khi di chuột, chiều rộng của div toàn văn hóa được tăng lên, đạt được hiệu quả hiệu quả tương tự: tiết lộ văn bản lớp phủ từ trái sang phải. Có một div thêm được bao quanh xung quanh văn bản lớp phủ đủ rộng để phù hợp với toàn bộ chiều rộng của văn bản. Điều này ngăn văn bản nhảy xuống dòng tiếp theo khi div đang tăng kích thước.

.wrapper {
  position: relative;
  width: 400px;
  font-family: 'Arial', sans-serif;
  font-size: 24px;
  background: beige
}

.fill-wrapper {
  width: 300px;
}

.fill-text {
  display: grid;
  justify-content: start;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  word-break: keep-all;
  width: 0;
  color: red;
  transition: 0.5s width ease-in-out;
}

.text {
  width: 150px;
  color: black;
}

.wrapper:hover .fill-text {
  width: 150px;
  transition: 0.5s width ease-in-out;
}
<div class="wrapper">
  <div class="fill-text">
    <div class="fill-wrapper">
      My Text
    </div>
  </div>
  <div class="text">
    My Text
  </div>
</div>

Hướng dẫn css animate text color change left to right - thay đổi màu văn bản động css từ trái sang phải

Dharman ♦

28.5K21 Huy hiệu vàng78 Huy hiệu bạc129 Huy hiệu đồng21 gold badges78 silver badges129 bronze badges

Đã trả lời ngày 16 tháng 12 năm 2021 lúc 0:37Dec 16, 2021 at 0:37

HendecahendecaHendeca

8751 Huy hiệu vàng14 Huy hiệu bạc31 Huy hiệu đồng1 gold badge14 silver badges31 bronze badges

DigitalOcean cung cấp các sản phẩm đám mây cho mọi giai đoạn của hành trình của bạn. Bắt đầu với $ 200 trong tín dụng miễn phí!

Hãy để tạo ra một hiệu ứng CSS thuần túy làm thay đổi màu của liên kết văn bản trên Hover, nhưng trượt màu mới đó thay vì chỉ đơn giản là hoán đổi màu sắc.

Hướng dẫn css animate text color change left to right - thay đổi màu văn bản động css từ trái sang phải

Có bốn kỹ thuật khác nhau chúng ta có thể sử dụng để làm điều này. Hãy cùng nhìn vào những người trong khi chú ý đến những điều quan trọng, như khả năng tiếp cận, hiệu suất và hỗ trợ trình duyệt trong tâm trí.

Bắt đầu nào!

Kỹ thuật 1: Sử dụng Chụp nền: Văn bản

Tại thời điểm viết, thuộc tính

<div class="outPop">
<div class="popUpWord">
  Text
</div>
</div>
8 là một tính năng thử nghiệm và không được hỗ trợ trong Internet Explorer 11 trở xuống.

Kỹ thuật này liên quan đến việc tạo văn bản loại trực tiếp với độ dốc khó khăn. Đánh dấu bao gồm một phần tử liên kết HTML duy nhất (

<div class="outPop">
<div class="popUpWord">
  Text
</div>
</div>
9) để tạo một siêu liên kết:

<a href="#">Link Hover</a>

Chúng ta có thể bắt đầu thêm các kiểu vào siêu liên kết. Sử dụng

.wrapper {
  position: relative;
  width: 400px;
  font-family: 'Arial', sans-serif;
  font-size: 24px;
  background: beige
}

.fill-wrapper {
  width: 300px;
}

.fill-text {
  display: grid;
  justify-content: start;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  word-break: keep-all;
  width: 0;
  color: red;
  transition: 0.5s width ease-in-out;
}

.text {
  width: 150px;
  color: black;
}

.wrapper:hover .fill-text {
  width: 150px;
  transition: 0.5s width ease-in-out;
}
0 sẽ cắt bất kỳ nội dung nào bên ngoài siêu liên kết trong quá trình chuyển đổi di chuột:

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

Chúng ta sẽ cần sử dụng một gradient tuyến tính với điểm dừng cứng ở mức 50% so với màu bắt đầu, chúng ta muốn liên kết cũng như màu sắc mà nó sẽ thay đổi thành:

a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

Hãy để sử dụng

.wrapper {
  position: relative;
  width: 400px;
  font-family: 'Arial', sans-serif;
  font-size: 24px;
  background: beige
}

.fill-wrapper {
  width: 300px;
}

.fill-text {
  display: grid;
  justify-content: start;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  word-break: keep-all;
  width: 0;
  color: red;
  transition: 0.5s width ease-in-out;
}

.text {
  width: 150px;
  color: black;
}

.wrapper:hover .fill-text {
  width: 150px;
  transition: 0.5s width ease-in-out;
}
1 để cắt gradient và giá trị
.wrapper {
  position: relative;
  width: 400px;
  font-family: 'Arial', sans-serif;
  font-size: 24px;
  background: beige
}

.fill-wrapper {
  width: 300px;
}

.fill-text {
  display: grid;
  justify-content: start;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  word-break: keep-all;
  width: 0;
  color: red;
  transition: 0.5s width ease-in-out;
}

.text {
  width: 150px;
  color: black;
}

.wrapper:hover .fill-text {
  width: 150px;
  transition: 0.5s width ease-in-out;
}
2 để hiển thị văn bản. Chúng tôi cũng sẽ sử dụng các thuộc tính
.wrapper {
  position: relative;
  width: 400px;
  font-family: 'Arial', sans-serif;
  font-size: 24px;
  background: beige
}

.fill-wrapper {
  width: 300px;
}

.fill-text {
  display: grid;
  justify-content: start;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  word-break: keep-all;
  width: 0;
  color: red;
  transition: 0.5s width ease-in-out;
}

.text {
  width: 150px;
  color: black;
}

.wrapper:hover .fill-text {
  width: 150px;
  transition: 0.5s width ease-in-out;
}
3 và
.wrapper {
  position: relative;
  width: 400px;
  font-family: 'Arial', sans-serif;
  font-size: 24px;
  background: beige
}

.fill-wrapper {
  width: 300px;
}

.fill-text {
  display: grid;
  justify-content: start;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  word-break: keep-all;
  width: 0;
  color: red;
  transition: 0.5s width ease-in-out;
}

.text {
  width: 150px;
  color: black;
}

.wrapper:hover .fill-text {
  width: 150px;
  transition: 0.5s width ease-in-out;
}
4 để có màu bắt đầu xuất hiện:

a {
  /* Same as before */
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
}

Cuối cùng, hãy để thêm thuộc tính

.wrapper {
  position: relative;
  width: 400px;
  font-family: 'Arial', sans-serif;
  font-size: 24px;
  background: beige
}

.fill-wrapper {
  width: 300px;
}

.fill-text {
  display: grid;
  justify-content: start;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  word-break: keep-all;
  width: 0;
  color: red;
  transition: 0.5s width ease-in-out;
}

.text {
  width: 150px;
  color: black;
}

.wrapper:hover .fill-text {
  width: 150px;
  transition: 0.5s width ease-in-out;
}
5 CSS và
<div class="outPop">
<div class="popUpWord">
  Text
</div>
</div>
5 CSS Pseudo-Class vào siêu liên kết. Để có liên kết điền từ trái sang phải khi di chuột, hãy sử dụng thuộc tính
.wrapper {
  position: relative;
  width: 400px;
  font-family: 'Arial', sans-serif;
  font-size: 24px;
  background: beige
}

.fill-wrapper {
  width: 300px;
}

.fill-text {
  display: grid;
  justify-content: start;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  word-break: keep-all;
  width: 0;
  color: red;
  transition: 0.5s width ease-in-out;
}

.text {
  width: 150px;
  color: black;
}

.wrapper:hover .fill-text {
  width: 150px;
  transition: 0.5s width ease-in-out;
}
4:

a {
  /* Same as before */
  transition: background-position 275ms ease;
}
a:hover {
  background-position: 0 100%;
}

Mặc dù kỹ thuật này đạt được hiệu ứng di chuột, Safari và Chrome sẽ cắt các trang trí văn bản và bóng tối, có nghĩa là chúng đã giành được. Áp dụng các kiểu văn bản, chẳng hạn như gạch chân, với thuộc tính CSS trang trí văn bản sẽ không hoạt động. Có lẽ xem xét sử dụng các phương pháp khác khi tạo ra gạch chân.

Kỹ thuật 2: Sử dụng chiều rộng/chiều cao

Điều này hoạt động bằng cách sử dụng thuộc tính dữ liệu chứa cùng một văn bản với tài liệu trong thẻ

<div class="outPop">
<div class="popUpWord">
  Text
</div>
</div>
9 và đặt
.wrapper {
  position: relative;
  width: 400px;
  font-family: 'Arial', sans-serif;
  font-size: 24px;
  background: beige
}

.fill-wrapper {
  width: 300px;
}

.fill-text {
  display: grid;
  justify-content: start;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  word-break: keep-all;
  width: 0;
  color: red;
  transition: 0.5s width ease-in-out;
}

.text {
  width: 150px;
  color: black;
}

.wrapper:hover .fill-text {
  width: 150px;
  transition: 0.5s width ease-in-out;
}
9 (điền văn bản từ từ trái sang phải hoặc phải sang trái) hoặc
<div class="wrapper">
  <div class="fill-text">
    <div class="fill-wrapper">
      My Text
    </div>
  </div>
  <div class="text">
    My Text
  </div>
</div>
0 đáy hoặc đáy đến đỉnh), từ 0% đến 100% khi di chuột.

Đây là dấu hiệu:

.popUpWord {
  text-transform: uppercase;
  font: bold 26vmax/.8 Open Sans, Impact;
  background: black;
  display: table;
  color: white;
}

.outPop:hover {
  margin: auto;
  background: linear-gradient( crimson , crimson) white no-repeat 0 0;
  background-size: 0 100%;
  animation: stripes 2s linear 1 forwards;
}
.outPop:hover .popUpWord{
  mix-blend-mode: multiply;
}

@keyframes stripes {
  to {
    background-size:100% 100%;
  }
}

body {
  float:left;
  height: 100%;
  background: black;
}
0

CSS tương tự như kỹ thuật trước đây trừ các thuộc tính CSS nền. Tài sản

<div class="wrapper">
  <div class="fill-text">
    <div class="fill-wrapper">
      My Text
    </div>
  </div>
  <div class="text">
    My Text
  </div>
</div>
1 sẽ hoạt động ở đây:

.popUpWord {
  text-transform: uppercase;
  font: bold 26vmax/.8 Open Sans, Impact;
  background: black;
  display: table;
  color: white;
}

.outPop:hover {
  margin: auto;
  background: linear-gradient( crimson , crimson) white no-repeat 0 0;
  background-size: 0 100%;
  animation: stripes 2s linear 1 forwards;
}
.outPop:hover .popUpWord{
  mix-blend-mode: multiply;
}

@keyframes stripes {
  to {
    background-size:100% 100%;
  }
}

body {
  float:left;
  height: 100%;
  background: black;
}
1

Đây là khi chúng ta cần sử dụng nội dung từ thuộc tính

<div class="wrapper">
  <div class="fill-text">
    <div class="fill-wrapper">
      My Text
    </div>
  </div>
  <div class="text">
    My Text
  </div>
</div>
2. Nó sẽ được định vị trên nội dung trong thẻ
<div class="outPop">
<div class="popUpWord">
  Text
</div>
</div>
9. Chúng ta có thể sử dụng thủ thuật nhỏ tốt để sao chép văn bản trong thuộc tính dữ liệu và hiển thị nó thông qua hàm
<div class="wrapper">
  <div class="fill-text">
    <div class="fill-wrapper">
      My Text
    </div>
  </div>
  <div class="text">
    My Text
  </div>
</div>
4 trên thuộc tính nội dung của phần tử giả ____ ____45.

.popUpWord {
  text-transform: uppercase;
  font: bold 26vmax/.8 Open Sans, Impact;
  background: black;
  display: table;
  color: white;
}

.outPop:hover {
  margin: auto;
  background: linear-gradient( crimson , crimson) white no-repeat 0 0;
  background-size: 0 100%;
  animation: stripes 2s linear 1 forwards;
}
.outPop:hover .popUpWord{
  mix-blend-mode: multiply;
}

@keyframes stripes {
  to {
    background-size:100% 100%;
  }
}

body {
  float:left;
  height: 100%;
  background: black;
}
2

Để giữ cho văn bản không thể gói sang dòng tiếp theo,

<div class="wrapper">
  <div class="fill-text">
    <div class="fill-wrapper">
      My Text
    </div>
  </div>
  <div class="text">
    My Text
  </div>
</div>
6 sẽ được áp dụng. Để thay đổi màu liên kết điền, đặt giá trị cho thuộc tính CSS màu bằng cách sử dụng phần tử giả
<div class="wrapper">
  <div class="fill-text">
    <div class="fill-wrapper">
      My Text
    </div>
  </div>
  <div class="text">
    My Text
  </div>
</div>
5 và bắt đầu
.wrapper {
  position: relative;
  width: 400px;
  font-family: 'Arial', sans-serif;
  font-size: 24px;
  background: beige
}

.fill-wrapper {
  width: 300px;
}

.fill-text {
  display: grid;
  justify-content: start;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  word-break: keep-all;
  width: 0;
  color: red;
  transition: 0.5s width ease-in-out;
}

.text {
  width: 150px;
  color: black;
}

.wrapper:hover .fill-text {
  width: 150px;
  transition: 0.5s width ease-in-out;
}
9 ở 0:

.popUpWord {
  text-transform: uppercase;
  font: bold 26vmax/.8 Open Sans, Impact;
  background: black;
  display: table;
  color: white;
}

.outPop:hover {
  margin: auto;
  background: linear-gradient( crimson , crimson) white no-repeat 0 0;
  background-size: 0 100%;
  animation: stripes 2s linear 1 forwards;
}
.outPop:hover .popUpWord{
  mix-blend-mode: multiply;
}

@keyframes stripes {
  to {
    background-size:100% 100%;
  }
}

body {
  float:left;
  height: 100%;
  background: black;
}
3

Tăng & nbsp; width & nbsp; lên 100% cho & nbsp; ________ 45 & nbsp; yếu tố giả để hoàn thành hiệu ứng văn bản trên máy bay lượn:

.popUpWord {
  text-transform: uppercase;
  font: bold 26vmax/.8 Open Sans, Impact;
  background: black;
  display: table;
  color: white;
}

.outPop:hover {
  margin: auto;
  background: linear-gradient( crimson , crimson) white no-repeat 0 0;
  background-size: 0 100%;
  animation: stripes 2s linear 1 forwards;
}
.outPop:hover .popUpWord{
  mix-blend-mode: multiply;
}

@keyframes stripes {
  to {
    background-size:100% 100%;
  }
}

body {
  float:left;
  height: 100%;
  background: black;
}
4

Mặc dù kỹ thuật này thực hiện thủ thuật, sử dụng các thuộc tính

.wrapper {
  position: relative;
  width: 400px;
  font-family: 'Arial', sans-serif;
  font-size: 24px;
  background: beige
}

.fill-wrapper {
  width: 300px;
}

.fill-text {
  display: grid;
  justify-content: start;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  word-break: keep-all;
  width: 0;
  color: red;
  transition: 0.5s width ease-in-out;
}

.text {
  width: 150px;
  color: black;
}

.wrapper:hover .fill-text {
  width: 150px;
  transition: 0.5s width ease-in-out;
}
9 hoặc
<div class="wrapper">
  <div class="fill-text">
    <div class="fill-wrapper">
      My Text
    </div>
  </div>
  <div class="text">
    My Text
  </div>
</div>
0 sẽ không tạo ra quá trình chuyển đổi CSS hiệu suất. Tốt nhất là sử dụng các thuộc tính
<a href="#">Link Hover</a>
2 hoặc
<a href="#">Link Hover</a>
3 để đạt được sự chuyển đổi mượt mà, 60fps.

Sử dụng thuộc tính

<div class="wrapper">
  <div class="fill-text">
    <div class="fill-wrapper">
      My Text
    </div>
  </div>
  <div class="text">
    My Text
  </div>
</div>
1 CSS có thể cho phép các kiểu gạch chân khác nhau xuất hiện trong quá trình chuyển đổi CSS. Tôi đã tạo một bản demo giới thiệu điều này bằng kỹ thuật tiếp theo: thuộc tính
<a href="#">Link Hover</a>
5 CSS.

Kỹ thuật 3: Sử dụng clip-path

Đối với kỹ thuật này, chúng tôi sẽ sử dụng thuộc tính

<a href="#">Link Hover</a>
5 CSS với hình dạng đa giác. Đa giác sẽ có bốn đỉnh, với hai trong số chúng mở rộng sang bên phải trên máy bay lượn:

Hướng dẫn css animate text color change left to right - thay đổi màu văn bản động css từ trái sang phải

Đánh dấu giống như kỹ thuật trước đó. Chúng tôi sẽ sử dụng một phần tử giả

<div class="wrapper">
  <div class="fill-text">
    <div class="fill-wrapper">
      My Text
    </div>
  </div>
  <div class="text">
    My Text
  </div>
</div>
5 một lần nữa, nhưng CSS thì khác:

.popUpWord {
  text-transform: uppercase;
  font: bold 26vmax/.8 Open Sans, Impact;
  background: black;
  display: table;
  color: white;
}

.outPop:hover {
  margin: auto;
  background: linear-gradient( crimson , crimson) white no-repeat 0 0;
  background-size: 0 100%;
  animation: stripes 2s linear 1 forwards;
}
.outPop:hover .popUpWord{
  mix-blend-mode: multiply;
}

@keyframes stripes {
  to {
    background-size:100% 100%;
  }
}

body {
  float:left;
  height: 100%;
  background: black;
}
5

Không giống như các kỹ thuật trước đó,

<a href="#">Link Hover</a>
8 phải được khai báo cho
<a href="#">Link Hover</a>
9 để màu để lấp đầy gạch chân trên di chuột.

Bây giờ, hãy để Lôi nhìn vào CSS cho kỹ thuật

<a href="#">Link Hover</a>
5:

.popUpWord {
  text-transform: uppercase;
  font: bold 26vmax/.8 Open Sans, Impact;
  background: black;
  display: table;
  color: white;
}

.outPop:hover {
  margin: auto;
  background: linear-gradient( crimson , crimson) white no-repeat 0 0;
  background-size: 0 100%;
  animation: stripes 2s linear 1 forwards;
}
.outPop:hover .popUpWord{
  mix-blend-mode: multiply;
}

@keyframes stripes {
  to {
    background-size:100% 100%;
  }
}

body {
  float:left;
  height: 100%;
  background: black;
}
6

Các đỉnh đa giác của thuộc tính

<a href="#">Link Hover</a>
5 được đặt theo tỷ lệ phần trăm để xác định tọa độ theo thứ tự được viết:

  • a {
      position: relative;
      display: inline-block;
      font-size: 2em;
      font-weight: 800;
      color: royalblue;
      overflow: hidden;
    }
    2 = trên cùng bên trái
  • a {
      position: relative;
      display: inline-block;
      font-size: 2em;
      font-weight: 800;
      color: royalblue;
      overflow: hidden;
    }
    2 = trên cùng bên phải
  • a {
      position: relative;
      display: inline-block;
      font-size: 2em;
      font-weight: 800;
      color: royalblue;
      overflow: hidden;
    }
    4 = dưới cùng bên phải
  • a {
      position: relative;
      display: inline-block;
      font-size: 2em;
      font-weight: 800;
      color: royalblue;
      overflow: hidden;
    }
    5 = phía dưới bên trái

Hướng của hiệu ứng điền có thể được thay đổi bằng cách sửa đổi tọa độ. Bây giờ chúng ta có một ý tưởng cho các tọa độ, chúng ta có thể làm cho đa giác mở rộng sang bên phải trên máy bay lượn:

.popUpWord {
  text-transform: uppercase;
  font: bold 26vmax/.8 Open Sans, Impact;
  background: black;
  display: table;
  color: white;
}

.outPop:hover {
  margin: auto;
  background: linear-gradient( crimson , crimson) white no-repeat 0 0;
  background-size: 0 100%;
  animation: stripes 2s linear 1 forwards;
}
.outPop:hover .popUpWord{
  mix-blend-mode: multiply;
}

@keyframes stripes {
  to {
    background-size:100% 100%;
  }
}

body {
  float:left;
  height: 100%;
  background: black;
}
7

Kỹ thuật này hoạt động khá tốt, nhưng lưu ý rằng hỗ trợ cho tài sản

<a href="#">Link Hover</a>
5 khác nhau giữa các trình duyệt. Tạo quá trình chuyển đổi CSS với
<a href="#">Link Hover</a>
5 là một sự thay thế tốt hơn so với sử dụng kỹ thuật ________ 39/________ 40; Tuy nhiên, nó ảnh hưởng đến sơn của trình duyệt.

Kỹ thuật 4: Sử dụng biến đổi

Đánh dấu cho kỹ thuật này sử dụng phương pháp mặt nạ với phần tử

a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}
0. Vì chúng tôi sẽ sử dụng nội dung trùng lặp trong một yếu tố riêng biệt, chúng tôi sẽ sử dụng
a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}
1 để cải thiện khả năng truy cập - điều đó sẽ ẩn nó khỏi đầu đọc màn hình để nội dung không đọc được hai lần:

.popUpWord {
  text-transform: uppercase;
  font: bold 26vmax/.8 Open Sans, Impact;
  background: black;
  display: table;
  color: white;
}

.outPop:hover {
  margin: auto;
  background: linear-gradient( crimson , crimson) white no-repeat 0 0;
  background-size: 0 100%;
  animation: stripes 2s linear 1 forwards;
}
.outPop:hover .popUpWord{
  mix-blend-mode: multiply;
}

@keyframes stripes {
  to {
    background-size:100% 100%;
  }
}

body {
  float:left;
  height: 100%;
  background: black;
}
8

CSS cho phần tử

a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}
0 chứa quá trình chuyển đổi sẽ bắt đầu từ bên trái:

.popUpWord {
  text-transform: uppercase;
  font: bold 26vmax/.8 Open Sans, Impact;
  background: black;
  display: table;
  color: white;
}

.outPop:hover {
  margin: auto;
  background: linear-gradient( crimson , crimson) white no-repeat 0 0;
  background-size: 0 100%;
  animation: stripes 2s linear 1 forwards;
}
.outPop:hover .popUpWord{
  mix-blend-mode: multiply;
}

@keyframes stripes {
  to {
    background-size:100% 100%;
  }
}

body {
  float:left;
  height: 100%;
  background: black;
}
9

Tiếp theo, chúng ta cần lấy & nbsp; ________ 70 để trượt bên phải như thế này:

Hướng dẫn css animate text color change left to right - thay đổi màu văn bản động css từ trái sang phải

Để làm điều này, chúng tôi sẽ sử dụng hàm

a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}
4 CSS và đặt nó thành 0:

<div class="outPop">
<div class="popUpWord">
  Text
</div>
</div>
0

Sau đó, chúng tôi sẽ sử dụng phần tử giả

<div class="wrapper">
  <div class="fill-text">
    <div class="fill-wrapper">
      My Text
    </div>
  </div>
  <div class="text">
    My Text
  </div>
</div>
5 cho
a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}
0, một lần nữa sử dụng thuộc tính
<div class="wrapper">
  <div class="fill-text">
    <div class="fill-wrapper">
      My Text
    </div>
  </div>
  <div class="text">
    My Text
  </div>
</div>
2 mà chúng tôi đã làm trước đó. Chúng tôi sẽ đặt vị trí bằng cách dịch nó 100% dọc theo trục x.

<div class="outPop">
<div class="popUpWord">
  Text
</div>
</div>
1

Giống như phần tử

a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}
0, vị trí của phần tử giả
<div class="wrapper">
  <div class="fill-text">
    <div class="fill-wrapper">
      My Text
    </div>
  </div>
  <div class="text">
    My Text
  </div>
</div>
5 cũng sẽ được đặt thành & nbsp; ________ 80:

<div class="outPop">
<div class="popUpWord">
  Text
</div>
</div>
2

Mặc dù kỹ thuật này là chất tương thích trình duyệt chéo nhất của nhóm, nhưng nó đòi hỏi nhiều đánh dấu và CSS hơn để đạt được điều đó. Điều đó nói rằng, sử dụng thuộc tính CSS Transform là tuyệt vời cho hiệu suất vì nó không kích hoạt các lần lặp lại và do đó tạo ra các chuyển đổi CSS mượt mà, 60fps.

Ở đó chúng tôi có nó!

Chúng tôi chỉ nhìn vào bốn kỹ thuật khác nhau để đạt được hiệu ứng tương tự. Mặc dù mỗi người đều có ưu và nhược điểm, bạn có thể thấy rằng nó hoàn toàn có thể trượt trong một thay đổi màu trên văn bản. Nó có một hiệu ứng nhỏ gọn làm cho các liên kết cảm thấy tương tác hơn một chút.