WEB前端，你玩透了吗。背景渐变，文字渐变，不仅背景可以渐变，文字也是阔以渐变的。下面，小编分享一段实现代码。
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全民博客</title>
</head>
<body>
<style type="text/css">
/*=====渐变扫光=====*/
.gradient{background-image: -webkit-linear-gradient(-30deg, #539FF1, #f00 30%, #002DBF 70%, #539FF1);-webkit-text-fill-color: transparent;-webkit-background-clip: text;-webkit-background-size: 200% 100%;-webkit-animation: text-background-animation 2s infinite linear;}
@-webkit-keyframes text-background-animation {0% {background-position:20% 0}100% {background-position:-120% 0}}
@keyframes text-background-animation {0% {background-position:20% 0}100% {background-position:-120% 0}}
</style>
<div style="background:#fff;"><a class="gradient">字体渐变效果</a></div>
</body>
</html>你看，是不是非常简单，通过CSS实现文字渐变色，其实就是两句代码那么简单。
本文结束
评论专区
上一篇
发表评论
评论列表（无评论）