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

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

1. 在body标签中建一个div,自定义标签h2*10，输入h e l l o w o r l d

    <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>

class="box"引入.box的css

2.css样式

给body标签设置背景色黑色，字体颜色白色

background-color:#111;

color:#fff;

3.设置box和h2样式

.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:hover{

   scale缩放,字体以0.3大小缩放 

    transform: scale(0.3);

}

4.设置每个h2中字体动画效果

.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;}

5.h2中字体颜色轮流变换

@keyframes light{

    0%{

    }

    100%{

      /* 滤镜--色调旋转 */

      filter: hue-rotate(360deg);

    }

}

具体css样式代码如下：

*{

    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);

      }

}