HTML文字液态流动渐变代码

发表于程序代码版块技术杂文

HTML文字渐变色，纯CSS液态渐变文字代码你可以根据需要修改样式，如字体大小、字体粗细等，请注意，不同浏览器对CSS属性的支持可能有所不同，所以最好在不同浏览器中进行测试和调整。

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>YECLOUD</title>
        <style>
            /* 重置默认的margin、padding和box-sizing样式 */
            *
            {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            /* body元素的样式 */
            body
            {
                background: #03001C; /* 设置背景颜色 */
                display: flex; /* 使用flexbox布局 */
                align-items: center; /* 纵向居中对齐元素 */
                flex-direction: column; /* 将元素按列排列 */
                justify-content: center; /* 横向居中对齐元素 */
                font-size: 8em; /* 设置字体大小 */
                min-height: 100vh; /* 视口的最小高度 */
            }
            /* content容器的样式 */
            .centent
            {
                position: relative; /* 设置定位上下文 */
            }
            /* 第一个h2元素的样式 */
            h2
            {
                color: transparent; /* 使文字颜色透明 */
                -webkit-text-stroke: 3px #03a9f4; /* 给文字添加带颜色的描边效果 */
            }
            /* 第二个h2元素的样式 */
            h2:nth-child(2)
            {
                position: absolute; /* 设置绝对定位 */
                top: 0; /* 将元素置于顶部 */
                color: transparent; /* 设置文字颜色透明 */
                background: linear-gradient(to right, green, blue, purple); /* 设置渐变背景色 */
                background-clip: text; /* 将背景色应用到文字内部 */
                -webkit-background-clip: text; /* Safari支持 */
                animation: animate 5s ease-in-out infinite; /* 使用动画效果 */
            }
            /* 定义animate动画 */
            @keyframes animate
            {
                0%, 100%
                {
                    clip-path: polygon(0 39%, 18% 51%, 34% 55%, 50% 48%, 61% 34%, 80% 31%, 99% 44%, 100% 99%, 1% 99%); /* 定义裁剪路径 */
                }
                50%
                {
                    clip-path: polygon(0 51%, 24% 72%, 53% 76%, 70% 70%, 83% 56%, 88% 46%, 100% 24%, 100% 99%, 1% 99%);
                }
                80%
                {
                    clip-path: polygon(0 52%, 22% 36%, 39% 36%, 50% 47%, 62% 57%, 81% 56%, 98% 45%, 100% 99%, 1% 99%);
                }
            }
        </style>
    </head>
    <body>
        <div class="centent">
            <h2>鸿盟创客</h2> <!-- 第一个h2元素 -->
            <h2>鸿盟创客</h2> <!-- 第二个h2元素 -->
        </div>
    </body>
</html>

本文章最后由 admin 于 2023-10-14 21:55 编辑

2023-10-14 11:17

评论列表评论