css样式实现炫彩字体

最新推荐文章于 2024-09-26 13:10:57 发布

不言而喻i

最新推荐文章于 2024-09-26 13:10:57 发布

阅读量1.8w

点赞数 6

分类专栏： web前端文章标签： css

本文链接：https://blog.csdn.net/yu_hongrun/article/details/78881238

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #logo {
                font-weight: 600;
                font-size: 28px;
                font-family: "黑体";
                color: #8c888b;
                background: -webkit-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
                -moz-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
                -ms-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
                color: transparent;
                /*设置字体颜色透明*/
                -webkit-background-clip: text;
                /*背景裁剪为文本形式*/
                animation: ran 10s linear infinite;
                /*动态10s展示*/
            }

            @keyframes ran {
                from {
                    backgroud-position: 0 0;
                }
                to {
                    background-position: 2000px 0;
                }
            }
        </style>
    </head>

    <body>
        <a class="navbar-brand" id="logo" href="#">不言而喻の博客&nbsp;&nbsp;</a>
    </body>

</html>