技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

纯CSS实现文字渐变和文字扫光动画效果

作者:admin    时间:2021-7-19 16:24:10    浏览:

前面介绍过《使用CSS创建的霓虹灯效果/发光效果文本》,今天再介绍如何使用纯CSS实现文字渐变和文字扫光动画效果。


文字渐变

文字扫光动画效果
文字扫光动画效果

文字扫光动画效果
文字扫光动画效果

demodownload

上面实例中,第一个是黑白渐变效果,第二个则是扫过动画效果。下面介绍如何通过CSS来实现。

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 属性用作元素遮罩层的图像。默认情况下,这意味着遮罩图像的alpha通道将与元素的alpha通道相乘。

2、文字扫过效果使用了 background-clip 属性,background-clip 属性规定背景的绘制区域。background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。

如果没有设置背景图片(background-image)或背景颜色(background-color),那么这个属性只有在边框( border)被设置为非固实(soild)、透明或半透明时才能看到视觉效果(与 border-styleborder-image 有关),否则,本属性产生的样式变化会被边框覆盖。

3、文字扫光动画效果CSS代码

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

id=animate 的复选框被选中时,触发动画。

4、文字扫过颜色设置

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

 

下面文章您可能也感兴趣

 

标签: css  css3  文字渐变  
x
  • 站长推荐
/* 左侧显示文章内容目录 */