Skr博客 - Singkar.cn

However long the night, the dawn will break.

网页字体抖音抖动CSS特效

in css,源码 文章转载请注明来源!

Tik Tok 抖音

<p class="shake">TikTok</p>

Tik Tok 抖音

<p class="tiktok">TikTok</p>


CSS代码:

.tiktok {
    animation: uk-text-shadow-glitch .65s cubic-bezier(1,-1.91,0,2.79) 0s infinite normal both running;
    }
@keyframes uk-text-shadow-glitch {
    0% {
        text-shadow: none
    }
    25% {
        text-shadow: -2px -2px 0 #ff004f,2px 2px 0 #00f7ef
    }
    50% {
        text-shadow: 2px -2px 0 #ff004f,-2px 2px 0 #00f7ef
    }
    75% {
        text-shadow: -2px 2px 0 #ff004f,2px -2px 0 #00f7ef
    }
    100% {
        text-shadow: 2px 2px 0 #ff004f,-2px -2px 0 #00f7ef
    }
}

@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)
    }
}

.shake {
    animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }
@keyframes shake-it {
    0% {
        text-shadow: 0 0 rgba(0,255,255,.5),0 0 rgba(255,0,0,.5)
    }

    25% {
        text-shadow: -2px 0 rgba(0,255,255,.5),2px 0 rgba(255,0,0,.5)
    }

    50% {
        text-shadow: -5px 0 rgba(0,255,255,.5),3px 0 rgba(255,0,0,.5)
    }

    100% {
        text-shadow: 3px 0 rgba(0,255,255,.5),5px 0 rgba(255,0,0,.5)
    }
}
jrotty WeChat Pay

微信打赏

jrotty Alipay

支付宝打赏

文章二维码

扫描二维码,在手机上阅读!

本文基于《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
文章链接:http://singkar.cn/index.php/archives/8/ (转载时请注明本文出处及文章链接)

css源码
发表新评论
PREVIOUS NEXT
雷姆
拉姆