css颜色渐变2

最新推荐文章于 2024-06-13 18:31:56 发布

青天魔王

最新推荐文章于 2024-06-13 18:31:56 发布

阅读量217

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/leixu1027/article/details/103869469

版权

web前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>CSS3渐变字体</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .masked{
            text-align: center;
            background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            -webkit-background-size: 200% 100%;
            -webkit-animation: masked-animation 4s infinite linear;
        }
        @-webkit-keyframes masked-animation {
            0%{ background-position: 0 0;}
            100% { background-position: -100% 0;}
        }
    </style>
</head>
<body>
<div class="masked" >
    <h1>css3文字渐变动画效果</h1>
</div>
</body>
</html>