卡卡網(wǎng)

前面介紹過《使用CSS創(chuàng)建的霓虹燈效果/發(fā)光效果文本》，今天再介紹如何使用純CSS實(shí)現(xiàn)文字漸變和文字掃光動畫效果。

文字漸變

文字掃光動畫效果

文字掃光動畫效果

demodownload

上面實(shí)例中，第一個是黑白漸變效果，第二個則是掃過動畫效果。下面介紹如何通過CSS來實(shí)現(xiàn)。

CSS代碼

:root {
  --gradient: linear-gradient(225deg, transparent, black);
  --gradient2: linear-gradient(to right,
    /* This combination makes the animation look continuous. */
    purple,
    red, orange, yellow, green, blue, purple,
    red, orange, yellow, green, blue, purple
  );
}

body {
  font-family: sans-serif;
}

p {
  max-width: 35rem;
}

.mdnlink {
  font-family: monospace;
}

.demo {
  width: 7em;
  font-size: 5rem;
  font-weight: bold;
  font-family: 'Arial Black', sans-serif;
  white-space: nowrap;
  overflow: hidden;
}

.mask-image {
  mask-image: var(--gradient);
  -webkit-mask-image: var(--gradient);
}

.background-clip {
  background: var(--gradient2);
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  background-position: left;
  color: transparent;
  margin: 0;
  padding: 0;
}

#animate:checked ~ .background-clip {
  animation: animate 5s infinite linear;
}

@keyframes animate {
  to {
    background-position: right;
  }
}

HTML代碼

文字漸變

<div class="demo mask-image">Hello World</div>

文字掃過動畫

<input id="animate" type="checkbox" checked><label for="animate">讓它動起來！</label>
<div class="demo background-clip">Hello World</div>

execcodegetcode

代碼解釋

1、文字漸變使用了CSS的 mask-image 屬性。mask-image 屬性用作元素遮罩層的圖像。默認(rèn)情況下，這意味著遮罩圖像的alpha通道將與元素的alpha通道相乘。

2、文字掃過效果使用了 background-clip 屬性，background-clip 屬性規(guī)定背景的繪制區(qū)域。background-clip 設(shè)置元素的背景（背景圖片或顏色）是否延伸到邊框、內(nèi)邊距盒子、內(nèi)容盒子下面。

如果沒有設(shè)置背景圖片（background-image）或背景顏色（background-color），那么這個屬性只有在邊框（ border）被設(shè)置為非固實(shí)（soild）、透明或半透明時才能看到視覺效果（與 border-style 或 border-image 有關(guān)），否則，本屬性產(chǎn)生的樣式變化會被邊框覆蓋。

3、文字掃光動畫效果CSS代碼

#animate:checked ~ .background-clip {
  animation: animate 5s infinite linear;
}
@keyframes animate {
  to {
    background-position: right;
  }
}

當(dāng) id=animate 的復(fù)選框被選中時，觸發(fā)動畫。

4、文字掃過顏色設(shè)置

:root {
  --gradient: linear-gradient(225deg, transparent, black);
  --gradient2: linear-gradient(to right,
    /*  下面的顏色組合設(shè)置文字顏色. */
    purple,
    red, orange, yellow, green, blue, purple,
    red, orange, yellow, green, blue, purple
  );
  --gradient3: linear-gradient(to right,
    /*  下面的顏色組合設(shè)置文字顏色. */
    black,
    black, white, 
    black, white
  );
}

下面文章您可能也感興趣

• 3個使用CSS創(chuàng)建的霓虹燈效果/發(fā)光效果文本

標(biāo)簽: css  css3  文字漸變