WEB前端，你玩透了吗。背景渐变，文字渐变，不仅背景可以渐变，文字也是阔以渐变的。下面，小编分享一段实现代码。
HTML
- <!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实现文字渐变色，其实就是两句代码那么简单。
本文结束
评论专区
上一篇
发表评论
评论列表（无评论）