Npcink Blog
切换菜单

怎么实现抖音文字彩色抖动效果？ - css 笔记

抖音的那个字是不是很酷炫呢？它是如何实现的呢？这一次的 CSS 笔记就和大家分享下实现抖音文字彩色抖动效果这个 CSS 特效

最后更新于
本页目录3 节

抖音的那个字是不是很酷炫呢？它是如何实现的呢？这一次的 CSS 笔记就和大家分享下实现抖音文字彩色抖动效果这个 CSS 特效。

第一个，有趣的眩晕文字：

.n-xy {
  text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
  animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

效果：

<h2 class="n-xy">
    有趣的彩色眩晕文字 - Npcink
</h2>
<style type="text/css">
.n-xy {
  text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
  animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
</style>

第二个：彩色抖动文字

.doudong{
    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)
    }
};
  }
}

效果：

<h2 class="doudong">彩色抖动文字 - Npcink</h2>
<style type="text/css">
.doudong{
    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)
    }
};
  }
}
</style>

第三个：抖音彩色抖动文本

太复杂了，链接中有详细的步骤说明可供参考。