效果图
css代码
.gradient-text {
background-image: linear-gradient(to right, #ff0000,orange,yellow,green, #00ff00,blue,purple);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
html
<h1 class="gradient-text">这是美丽的字体，颜色渐变，lskyf.com这是美丽的字体，颜色渐变，lskyf.com这是美丽的字体，颜色渐变，lskyf.com这是美丽的字体，颜色渐变，lskyf.com</h1>
完整代码
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-text {
background-image: linear-gradient(to right, #ff0000,orange,yellow,green, #00ff00,blue,purple);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
</style>
</head>
<body>
<h1 class="gradient-text">这是美丽的字体，颜色渐变，lskyf.com这是美丽的字体，颜色渐变，lskyf.com这是美丽的字体，颜色渐变，lskyf.com这是美丽的字体，颜色渐变，lskyf.com</h1>
</body>
</html>
注意：本文归作者所有，未经作者允许，不得转载
