html文字抖动效果,CSS抖动文字特效

CSS抖动文字特效

今天发一个css的代码，感觉很好玩?

把下面css代码放在head或者footer标签里面引用，或者放在网站的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)

}

}

网页代码或者在你的编辑器里面输入

内容标签>

下面是效果(有点崩坏的感觉..)

正确的食用方法如下?

ヾ(•ω•`)o拜拜