给博客添加一个文字抖动效果

用css实现文字抖动特效

  1. t-transform: translate(-1px, 1.5px) rotate(1.5deg)
  2. }
  3. 4% {
  4. -webkit-transform: translate(1.3px, 0px) rotate(-0.5deg)
  5. }
  6. 6% {
  7. -webkit-transform: translate(1.4px, 1.4px) rotate(-2deg)
  8. }
  9. 8% {
  10. -webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg)
  11. }
  12. 10% {
  13. -webkit-transform: translate(1.4px, 0px) rotate(-2deg)
  14. }
  15. 12% {
  16. -webkit-transform: translate(-1.3px, -1px) rotate(-2deg)
  17. }
  18. 14% {
  19. -webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg)
  20. }
  21. 16% {
  22. -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg)
  23. }
  24. 18% {
  25. -webkit-transform: translate(1.3px, -1.3px) rotate(-2deg)
  26. }
  27. 20% {
  28. -webkit-transform: translate(1px, 1px) rotate(-0.5deg)
  29. }
  30. 22% {
  31. -webkit-transform: translate(1.3px, 1.5px) rotate(-2deg)
  32. }
  33. 24% {
  34. -webkit-transform: translate(-1.4px, -1px) rotate(2deg)
  35. }
  36. 26% {
  37. -webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg)
  38. }
  39. 28% {
  40. -webkit-transform: translate(1.6px, -1.6px) rotate(-2deg)
  41. }
  42. 30% {
  43. -webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg)
  44. }
  45. 32% {
  46. -webkit-transform: translate(-1px, 0px) rotate(2deg)
  47. }
  48. 34% {
  49. -webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg)
  50. }
  51. 36% {
  52. -webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg)
  53. }
  54. 38% {
  55. -webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg)
  56. }
  57. 40% {
  58. -webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg)
  59. }
  60. 42% {
  61. -webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg)
  62. }
  63. 44% {
  64. -webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg)
  65. }
  66. 46% {
  67. -webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg)
  68. }
  69. 48% {
  70. -webkit-transform: translate(1px, 1.6px) rotate(1.5deg)
  71. }
  72. 50% {
  73. -webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg)
  74. }
  75. 52% {
  76. -webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg)
  77. }
  78. 54% {
  79. -webkit-transform: translate(1.6px, -1px) rotate(-2deg)
  80. }
  81. 56% {
  82. -webkit-transform: translate(1.3px, -1.6px) rotate(-2deg)
  83. }
  84. 58% {
  85. -webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg)
  86. }
  87. 60% {
  88. -webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg)
  89. }
  90. 62% {
  91. -webkit-transform: translate(0px, 0px) rotate(-1.5deg)
  92. }
  93. 64% {
  94. -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)
  95. }
  96. 66% {
  97. -webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg)
  98. }
  99. 68% {
  100. -webkit-transform: translate(0px, -1.6px) rotate(-2deg)
  101. }
  102. 70% {
  103. -webkit-transform: translate(-1.6px, 1px) rotate(1.5deg)
  104. }
  105. 72% {
  106. -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg)
  107. }
  108. 74% {
  109. -webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg)
  110. }
  111. 76% {
  112. -webkit-transform: translate(1.4px, 1px) rotate(-0.5deg)
  113. }
  114. 78% {
  115. -webkit-transform: translate(-1px, 1.4px) rotate(2deg)
  116. }
  117. 80% {
  118. -webkit-transform: translate(1.4px, 1.6px) rotate(2deg)
  119. }
  120. 82% {
  121. -webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg)
  122. }
  123. 84% {
  124. -webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg)
  125. }
  126. 86% {
  127. -webkit-transform: translate(1px, 1.4px) rotate(-2deg)
  128. }
  129. 88% {
  130. -webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg)
  131. }
  132. 90% {
  133. -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)
  134. }
  135. 92% {
  136. -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg)
  137. }
  138. 94% {
  139. -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)
  140. }
  141. 96% {
  142. -webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg)
  143. }
  144. 98% {
  145. -webkit-transform: translate(1.3px, 1px) rotate(-0.5deg)
  146. }
  147. }
  148. @keyframes shaky-slow {
  149. 0% {
  150. transform: translate(0px, 0px) rotate(0deg)
  151. }
  152. 2% {
  153. transform: translate(-1px, 1.5px) rotate(1.5deg)
  154. }
  155. 4% {
  156. transform: translate(1.3px, 0px) rotate(-0.5deg)
  157. }
  158. 6% {
  159. transform: translate(1.4px, 1.4px) rotate(-2deg)
  160. }
  161. 8% {
  162. transform: translate(-1.3px, -1px) rotate(-1.5deg)
  163. }
  164. 10% {
  165. transform: translate(1.4px, 0px) rotate(-2deg)
  166. }
  167. 12% {
  168. transform: translate(-1.3px, -1px) rotate(-2deg)
  169. }
  170. 14% {
  171. transform: translate(1.5px, 1.3px) rotate(1.5deg)
  172. }
  173. 16% {
  174. transform: translate(1.5px, -1.5px) rotate(-1.5deg)
  175. }
  176. 18% {
  177. transform: translate(1.3px, -1.3px) rotate(-2deg)
  178. }
  179. 20% {
  180. transform: translate(1px, 1px) rotate(-0.5deg)
  181. }
  182. 22% {
  183. transform: translate(1.3px, 1.5px) rotate(-2deg)
  184. }
  185. 24% {
  186. transform: translate(-1.4px, -1px) rotate(2deg)
  187. }
  188. 26% {
  189. transform: translate(1.3px, -1.3px) rotate(0.5deg)
  190. }
  191. 28% {
  192. transform: translate(1.6px, -1.6px) rotate(-1.5deg)
  193. }
  194. 30% {
  195. transform: translate(-1.3px, -1.3px) rotate(-1.5deg)
  196. }
  197. 32% {
  198. transform: translate(-1px, 0px) rotate(2deg)
  199. }
  200. 34% {
  201. transform: translate(1.3px, 1.3px) rotate(-0.5deg)
  202. }
  203. 36% {
  204. transform: translate(1.3px, 1.6px) rotate(1.5deg)
  205. }
  206. 38% {
  207. transform: translate(1.3px, -1.6px) rotate(1.5deg)
  208. }
  209. 40% {
  210. transform: translate(-1.4px, -1px) rotate(-0.5deg)
  211. }
  212. 42% {
  213. transform: translate(-1.4px, 1.3px) rotate(-0.5deg)
  214. }
  215. 44% {
  216. transform: translate(-1.6px, 1.4px) rotate(0.5deg)
  217. }
  218. 46% {
  219. transform: translate(-2.1px, -1.3px) rotate(-0.5deg)
  220. }
  221. 48% {
  222. transform: translate(1px, 1.6px) rotate(1.5deg)
  223. }
  224. 50% {
  225. transform: translate(1.6px, 1.6px) rotate(1.5deg)
  226. }
  227. 52% {
  228. transform: translate(-1.4px, 1.6px) rotate(0.5deg)
  229. }
  230. 54% {
  231. transform: translate(1.6px, -1px) rotate(-2deg)
  232. }
  233. 56% {
  234. transform: translate(1.3px, -1.6px) rotate(-2deg)
  235. }
  236. 58% {
  237. transform: translate(-1.3px, -1.6px) rotate(0.5deg)
  238. }
  239. 60% {
  240. transform: translate(1.3px, 1.6px) rotate(-0.5deg)
  241. }
  242. 62% {
  243. transform: translate(0px, 0px) rotate(-1.5deg)
  244. }
  245. 64% {
  246. transform: translate(-1.6px, -1.6px) rotate(-2deg)
  247. }
  248. 66% {
  249. transform: translate(1.6px, -1.6px) rotate(0.5deg)
  250. }
  251. 68% {
  252. transform: translate(0px, -1.6px) rotate(-2deg)
  253. }
  254. 70% {
  255. transform: translate(-1.6px, 1px) rotate(1.5deg)
  256. }
  257. 72% {
  258. transform: translate(-1.6px, 1.6px) rotate(2deg)
  259. }
  260. 74% {
  261. transform: translate(1.3px, -1.6px) rotate(-0.5deg)
  262. }
  263. 76% {
  264. transform: translate(1.4px, 1px) rotate(-0.5deg)
  265. }
  266. 78% {
  267. transform: translate(-1px, 1.4px) rotate(2deg)
  268. }
  269. 80% {
  270. transform: translate(1.4px, 1.6px) rotate(2deg)
  271. }
  272. 82% {
  273. transform: translate(-1.6px, -1.6px) rotate(-0.5deg)
  274. }
  275. 84% {
  276. transform: translate(-1.4px, 1.4px) rotate(-2deg)
  277. }
  278. 86% {
  279. transform: translate(1px, 1.4px) rotate(-2deg)
  280. }
  281. 88% {
  282. transform: translate(-1.4px, 1.4px) rotate(-1.5deg)
  283. }
  284. 90% {
  285. transform: translate(-1.6px, -1.6px) rotate(-2deg)
  286. }
  287. 92% {
  288. transform: translate(-1.4px, 1.6px) rotate(2deg)
  289. }
  290. 94% {
  291. transform: translate(-1.6px, -1.6px) rotate(-2deg)
  292. }
  293. 96% {
  294. transform: translate(-1.4px, 1.3px) rotate(-2deg)
  295. }
  296. 98% {
  297. transform: translate(1.3px, 1px) rotate(-0.5deg)
  298. }
  299. }

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

  1. class="shaky">你想说什么
  2.  
建站教程

WordPress纯代码添加在线人数

2019-8-28 13:21:06

建站教程

WordPress 7b2主题 修改 美化 备忘录

2019-8-28 13:24:22

本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策。若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
⚠️
本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策
若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
欢迎您,新朋友,感谢参与互动!
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
私信列表
搜索