CSS特效--流动字体

前言

这里我们要实现这一个特效需要使用新的属性——‘clip-path’，它是css3的一个强大属性，我们可以利用它来绘制各种各样的图形，不过自己写需要时间，一些常用的我们可以用生成器

这里我给个网站大家如果参考下：
生成器

代码版块

<div class="top">
        <div class="con">
            <h2 class="ico1">我想睡觉 啊啊啊啊</h2>
            <h2 class="ico2">我想睡觉 啊啊啊啊</h2>
        </div>
    </div>
    <!--这里的top是一个容器，con盒子是做为一个单位的工具 -->

* {
            margin: 0;
            padding: 0;
        }
        .top{
            display: flex;
            justify-content: center;
            align-items: center;
            /*这里用了我前面介绍的盒子flex布局居中的方法*/
            width: 100%;
            height: 700px;
            background-color: aqua;
        }
        .con{
            /*充当定位的工具*/
            position: relative;
        }
        .con h2 {
            position: absolute;
            width: 1400px;
            color: #fff;
            font-size: 10em;
            transform: translate(-50%, -50%);
        }
        .con .ico1{
        /*这个是下面的字（因为h2重叠了）*/
        color: transparent;
        -webkit-text-stroke: 2px rgb(129, 126, 126);
        /*-webkit-text-stroke 文字描边(第一个参数是宽度，第二份是颜色，火狐、chrome已经支持)*/
        }
        .con .ico2{
            color: rgb(238, 206, 25);
            animation: animate 18s linear infinite;
        }
        @keyframes animate {
        0%{
            clip-path: polygon(0% 100%, 33% 100%, 68% 100%, 100% 100%, 100% 100%, 68% 100%, 32% 100%, 0 100%);
        }
        
        50%{
            clip-path: polygon(0% 100%, 33% 100%, 68% 100%, 100% 100%, 100% 1%, 70% 0%, 33% 0%, 0% 0%);
        }
        100%{
            clip-path: polygon(0% 100%, 33% 100%, 68% 100%, 100% 100%, 100% 100%, 68% 100%, 32% 100%, 0 100%);
        }
        }
        

结尾

这是一种比较新型的特效，如果对大家有所帮助的，烦请给萌新点个赞，respect！