记磊博客

发表文章数:272

css实现文字抖动的效果,其实蛮好玩的呢
食用

我加在了文章有更新就会提示抖动

css实现文字抖动

效果

轻刻年轮里的时光-记磊博客

然后用class选择器引用就可以了,比如:

<span class="shaky">轻刻年轮里的时光-记磊博客</span>

代码css

.shaky {
display: inline-block;
padding: 1px;
font-size: 12px;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-animation-name: shaky-slow;
-ms-animation-name: shaky-slow;
animation-name: shaky-slow;
-webkit-animation-duration: 4s;
-ms-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running;
}
@-webkit-keyframes shaky-slow {
0% {
-webkit-transform: translate(0px, 0px) rotate(0deg)
}
2% {
-webkit-transform: translate(-1px, 1.5px) rotate(1.5deg)
}
4% {
-webkit-transform: translate(1.3px, 0px) rotate(-0.5deg)
}
6% {
-webkit-transform: translate(1.4px, 1.4px) rotate(-2deg)
}
8% {
-webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg)
}
10% {
-webkit-transform: translate(1.4px, 0px) rotate(-2deg)
}
12% {
-webkit-transform: translate(-1.3px, -1px) rotate(-2deg)
}
14% {
-webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg)
}
16% {
-webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg)
}
18% {
-webkit-transform: translate(1.3px, -1.3px) rotate(-2deg)
}
20% {
-webkit-transform: translate(1px, 1px) rotate(-0.5deg)
}
22% {
-webkit-transform: translate(1.3px, 1.5px) rotate(-2deg)
}
24% {
-webkit-transform: translate(-1.4px, -1px) rotate(2deg)
}
26% {
-webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg)
}
28% {
-webkit-transform: translate(1.6px, -1.6px) rotate(-2deg)
}
30% {
-webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg)
}
32% {
-webkit-transform: translate(-1px, 0px) rotate(2deg)
}
34% {
-webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg)
}
36% {
-webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg)
}
38% {
-webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg)
}
40% {
-webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg)
}
42% {
-webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg)
}
44% {
-webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg)
}
46% {
-webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg)
}
48% {
-webkit-transform: translate(1px, 1.6px) rotate(1.5deg)
}
50% {
-webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg)
}
52% {
-webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg)
}
54% {
-webkit-transform: translate(1.6px, -1px) rotate(-2deg)
}
56% {
-webkit-transform: translate(1.3px, -1.6px) rotate(-2deg)
}
58% {
-webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg)
}
60% {
-webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg)
}
62% {
-webkit-transform: translate(0px, 0px) rotate(-1.5deg)
}
64% {
-webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)
}
66% {
-webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg)
}
68% {
-webkit-transform: translate(0px, -1.6px) rotate(-2deg)
}
70% {
-webkit-transform: translate(-1.6px, 1px) rotate(1.5deg)
}
72% {
-webkit-transform: translate(-1.6px, 1.6px) rotate(2deg)
}
74% {
-webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg)
}
76% {
-webkit-transform: translate(1.4px, 1px) rotate(-0.5deg)
}
78% {
-webkit-transform: translate(-1px, 1.4px) rotate(2deg)
}
80% {
-webkit-transform: translate(1.4px, 1.6px) rotate(2deg)
}
82% {
-webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg)
}
84% {
-webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg)
}
86% {
-webkit-transform: translate(1px, 1.4px) rotate(-2deg)
}
88% {
-webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg)
}
90% {
-webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)
}
92% {
-webkit-transform: translate(-1.6px, 1.6px) rotate(2deg)
}
94% {
-webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)
}
96% {
-webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg)
}
98% {
-webkit-transform: translate(1.3px, 1px) rotate(-0.5deg)
}
}
@keyframes shaky-slow {
0% {
transform: translate(0px, 0px) rotate(0deg)
}
2% {
transform: translate(-1px, 1.5px) rotate(1.5deg)
}
4% {
transform: translate(1.3px, 0px) rotate(-0.5deg)
}
6% {
transform: translate(1.4px, 1.4px) rotate(-2deg)
}
8% {
transform: translate(-1.3px, -1px) rotate(-1.5deg)
}
10% {
transform: translate(1.4px, 0px) rotate(-2deg)
}
12% {
transform: translate(-1.3px, -1px) rotate(-2deg)
}
14% {
transform: translate(1.5px, 1.3px) rotate(1.5deg)
}
16% {
transform: translate(1.5px, -1.5px) rotate(-1.5deg)
}
18% {
transform: translate(1.3px, -1.3px) rotate(-2deg)
}
20% {
transform: translate(1px, 1px) rotate(-0.5deg)
}
22% {
transform: translate(1.3px, 1.5px) rotate(-2deg)
}
24% {
transform: translate(-1.4px, -1px) rotate(2deg)
}
26% {
transform: translate(1.3px, -1.3px) rotate(0.5deg)
}
28% {
transform: translate(1.6px, -1.6px) rotate(-1.5deg)
}
30% {
transform: translate(-1.3px, -1.3px) rotate(-1.5deg)
}
32% {
transform: translate(-1px, 0px) rotate(2deg)
}
34% {
transform: translate(1.3px, 1.3px) rotate(-0.5deg)
}
36% {
transform: translate(1.3px, 1.6px) rotate(1.5deg)
}
38% {
transform: translate(1.3px, -1.6px) rotate(1.5deg)
}
40% {
transform: translate(-1.4px, -1px) rotate(-0.5deg)
}
42% {
transform: translate(-1.4px, 1.3px) rotate(-0.5deg)
}
44% {
transform: translate(-1.6px, 1.4px) rotate(0.5deg)
}
46% {
transform: translate(-2.1px, -1.3px) rotate(-0.5deg)
}
48% {
transform: translate(1px, 1.6px) rotate(1.5deg)
}
50% {
transform: translate(1.6px, 1.6px) rotate(1.5deg)
}
52% {
transform: translate(-1.4px, 1.6px) rotate(0.5deg)
}
54% {
transform: translate(1.6px, -1px) rotate(-2deg)
}
56% {
transform: translate(1.3px, -1.6px) rotate(-2deg)
}
58% {
transform: translate(-1.3px, -1.6px) rotate(0.5deg)
}
60% {
transform: translate(1.3px, 1.6px) rotate(-0.5deg)
}
62% {
transform: translate(0px, 0px) rotate(-1.5deg)
}
64% {
transform: translate(-1.6px, -1.6px) rotate(-2deg)
}
66% {
transform: translate(1.6px, -1.6px) rotate(0.5deg)
}
68% {
transform: translate(0px, -1.6px) rotate(-2deg)
}
70% {
transform: translate(-1.6px, 1px) rotate(1.5deg)
}
72% {
transform: translate(-1.6px, 1.6px) rotate(2deg)
}
74% {
transform: translate(1.3px, -1.6px) rotate(-0.5deg)
}
76% {
transform: translate(1.4px, 1px) rotate(-0.5deg)
}
78% {
transform: translate(-1px, 1.4px) rotate(2deg)
}
80% {
transform: translate(1.4px, 1.6px) rotate(2deg)
}
82% {
transform: translate(-1.6px, -1.6px) rotate(-0.5deg)
}
84% {
transform: translate(-1.4px, 1.4px) rotate(-2deg)
}
86% {
transform: translate(1px, 1.4px) rotate(-2deg)
}
88% {
transform: translate(-1.4px, 1.4px) rotate(-1.5deg)
}
90% {
transform: translate(-1.6px, -1.6px) rotate(-2deg)
}
92% {
transform: translate(-1.4px, 1.6px) rotate(2deg)
}
94% {
transform: translate(-1.6px, -1.6px) rotate(-2deg)
}
96% {
transform: translate(-1.4px, 1.3px) rotate(-2deg)
}
98% {
transform: translate(1.3px, 1px) rotate(-0.5deg)
}
}

转自:淘气有修改哈

未经允许不得转载:作者:记磊博客, 转载或复制请以 超链接形式 并注明出处 轻刻年轮
原文地址:《【折腾代码】给文字加上抖动特效css实现》 发布于2018-07-03

分享到:

本文共6386个字,预计阅读时间需要16分钟。
您阅读这篇文章共花了: 0小时00分00秒

评论 2

评论前必须登录!

  注册

  1. #0

    建议博主不要设置登陆评论功能,欢迎到我的主页留言http://www.diaofeiyu.com

    热情走到了极地3个月前 (01-27)
  2. #0

    学习学习

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.0主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册