CSS抖音特效

第一种

看这里1

<style>
 #h1:hover {
            animation: uk-text-shadow-glitch .65s cubic-bezier(1, -2.91, 0, 3.79) 0s infinite normal both running;
        }

        @keyframes uk-text-shadow-glitch {
            0% {
                text-shadow: none
            }

            25% {
                text-shadow: -2px -2px 0 #ff0048, 2px 2px 0 #3234ff
            }

            50% {
                text-shadow: 2px -2px 0 #ff0048, -2px 2px 0 #3234ff
            }

            75% {
                text-shadow: -2px 2px 0 #ff0048, 2px -2px 0 #3234ff
            }

            100% {
                text-shadow: 2px 2px 0 #ff0048, -2px -2px 0 #3234ff
            }
        }

        @keyframes uk-flicker {
            0% {
                opacity: 0
            }

            10% {
                opacity: .6;
                transform: scale(.8)
            }

            20% {
                opacity: 0
            }

            40% {
                opacity: 1
            }

            50% {
                opacity: .2;
                transform: scale(1.1)
            }

            100% {
                opacity: 1;
                transform: scale(1)
            }
        }


</style>
<h1 id="h1">鼠标放这里</h1>

其中 cubic-bezier(1,-2.91,0,3.79) 是贝赛尔曲线，数值越大，抖的越厉害。具体可以参考 <timing-function> 的 API 。

第二种

ITSSECN

 <style>
        .main {
            background: #000;
            
        }

        .glitch {
            position: relative;
            color: #fff;
            mix-blend-mode: lighten;
            font-size: 60px;
        }

        .glitch:before,
        .glitch:after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0);
            clip: rect(0, 0, 0, 0);
        }

        .glitch:before {
            left: -1px;
            text-shadow: 4px 0 #ff3f1a;
            animation: glitch-loop-1 .8s infinite ease-in-out alternate-reverse;
        }

        .glitch:after {
            left:1px;
            text-shadow: -5px 0 #00a7e0;
            animation: glitch-loop-2 .8s infinite ease-in-out alternate-reverse;
        }

        @keyframes glitch-loop-1 {
            0% {
                clip: rect(36px, 9999px, 9px, 0)
            }

            25% {
                clip: rect(25px, 9999px, 99px, 0)
            }

            50% {
                clip: rect(50px, 9999px, 102px, 0)
            }

            75% {
                clip: rect(30px, 9999px, 92px, 0)
            }

            100% {
                clip: rect(91px, 9999px, 98px, 0)
            }
        }

       @keyframes glitch-loop-2 {
            0% {
                top: -1px;
                left: 1px;
                clip: rect(65px, 9999px, 119px, 0)
            }

            25% {
                top: -6px;
                left: 4px;
                clip: rect(79px, 9999px, 19px, 0)
            }

            50% {
                top: -3px;
                left: 2px;
                clip: rect(68px, 9999px, 11px, 0)
            }

            75% {
                top: 0;
                left: -4px;
                clip: rect(95px, 9999px, 53px, 0)
            }

            100% {
                top: -1px;
                left: -1px;
                clip: rect(31px, 9999px, 149px, 0)
        }
    }
    </style>
</head>

<body>
    <div class="main">
        <h1 class="glitch" data-text="ITSSECN">ITSSECN</h1>
    </div>
</body>

WishMeLz

CSS抖音特效

第一种

看这里1

第二种

ITSSECN