CSS3中filter hue-rotate()制作炫酷的文字效果

最新推荐文章于 2024-03-04 16:31:41 发布

huxiaoxiao.

最新推荐文章于 2024-03-04 16:31:41 发布

阅读量517

点赞数

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

本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121526077

版权

css 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

布局部分：

<body>
    <div class="box">
        <h2>h</h2>
        <h2>e</h2>
        <h2>l</h2>
        <h2>l</h2>
        <h2>o</h2>

        <h2 style="margin-left: 20px;">w</h2>
        <h2>o</h2>
        <h2>r</h2>
        <h2>l</h2>
        <h2>d</h2>
    </div>
</body>

样式部分：

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            min-height: 100vh;
            background-color: #111;
            color: #fff;
        }
        .box{
            width: 1200px;
            min-height:60vh;
            margin: 0 auto;
            margin-top: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }
        .box h2{
            cursor: pointer;
            color: #fff;
            font-size: 230px;
            /* 文本内容转大写 */
            text-transform: uppercase;
            /* 字间隙 */
            letter-spacing: 30px;
            /* css3字体阴影 */
            text-shadow: 0 0 10px #fff,
            0 0 20px #fff,
            0 0 30px rgb(245,0,245),
            0 0 40px rgb(245,0,245),
            0 0 60px purple,
            0 0 70px purple;
            /* css3过渡动画 */
            transition: transform 0.8s;
        }
        .box h2:hover{
            /* scale缩放 */
            transform: scale(0.3);
        }
        .box h2:first-of-type{animation: light 4s linear infinite;}

        .box h2:nth-of-type(2){animation: light 3s linear infinite;}
        .box h2:nth-of-type(3){animation: light 2.8s linear infinite;}
        .box h2:nth-of-type(4){animation: light 3.6s linear infinite;}
        .box h2:nth-of-type(5){animation: light 4.4s linear infinite;}
        .box h2:nth-of-type(6){animation: light 2s linear infinite;}
        .box h2:nth-of-type(7){animation: light 2.3s linear infinite;}
        .box h2:nth-of-type(8){animation: light 1.4s linear infinite;}
        .box h2:nth-of-type(9){animation: light 4s linear infinite;}

        .box h2:last-of-type{animation: light 5s linear infinite;}
        @keyframes light{
            0%{

            }
            100%{
              /* 滤镜--色调旋转 */
              filter: hue-rotate(360deg);
            }
        }
    </style>

查看结果：

huxiaoxiao.

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3中filter hue-rotate()制作炫酷的文字效果

布局部分：<body> <div class="box"> <h2>h</h2> <h2>e</h2> <h2>l</h2> <h2>l</h2> <h2>o</h2> <h2 style="margin-left: 20px;">w</
复制链接

扫一扫