3

前端工程师通过CSS实现文字渐变色

 2 years ago
source link: https://www.80shihua.com/archives/1854
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

前端工程师通过CSS实现文字渐变色

作者: AileenMoffatt02 分类: css,html 发布时间: 2019-01-19 10:20

css3有很多强大的功能，比如我们经常看到的艺术字，其实可以通过css3的渐变来修改.

6933b78d5742a88598521759d180585c.png

background: linear-gradient(to right, red, blue);

这样就是给文件添加一个渐变背景。

还有一种方法就是使用-webkit-mask，这个是给背景做遮盖，通过不同的背景显隐，来控制文字的变化。

<!doctype html>

<html>

<head>

<meta charset="UTF-8" />

<style type="text/css">

        position: relative;

        color: yellow;

    h1:before{

        content: attr(text);

        position: absolute;

        z-index: 10;

        color:pink;

        -webkit-mask:linear-gradient(to left, red, transparent );

</style>

</style>

</head>

<body>

    <h1 text="前端简单说">前端简单说</h1>

</body>

</html>

效果如下：

image.png

如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！

发表评论 取消回复

电子邮件地址不会被公开。 必填项已用*标注


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK