CSS字体颜色改变

最新推荐文章于 2024-01-29 19:37:34 发布

白柚Y

最新推荐文章于 2024-01-29 19:37:34 发布

阅读量934

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_67084957/article/details/123076665

版权

 * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        p {
            font-size: 70px;
            font-weight: 600;
            text-align: center;
            line-height: 300px;
            color: transparent;
            background-image: linear-gradient(to right, #f00 10%, #ff0 20%, #f0f 30%, #0f0 40%, #0ff 50%, #ff9000 60%, #9000ff 70%, #0090ff 80%, #00f 90%);
            background-size: 200%;
            background-clip: text;
            -webkit-background-clip: text;
            /* -webkit-background-clip:border-box; */
            /* -webkit-background-clip:padding-box; */
            /* -webkit-background-clip:content-box; */

            animation: move 6s ease infinite alternate;
        }

        @keyframes move{
            0% {
                background-position-x: -10%;
            }
            100% {
                background-position-x: 80%;
            }
        }

<body>
    <p>悄悄是别离的笙箫,沉默是今晚的康桥</p>
  


<!-- 注:background-image:linear-gradient()是线性渐变函数
to right 从左向右
to top  从下到上
to left 从右到左
to bottom 从上到下(默认值) -->




<!-- 注:background-clip:是背景剪裁.
background-clip:border-box; //背景延伸到边框外沿(但是在边框之下)
background-clip:padding-box;//边框下没有背景,即背景延伸到内边距外沿
background-clip:content-box;//背景剪裁到内容区外沿
-webkit-background-clip:text //(因为兼容性差,所以带上前缀),意思是以区块内的文字作为剪裁区域向外剪裁,
文字的背景即为区块的背景，文字之外的区域都将被裁剪掉.-->