html5 css3 摇一摇,CSS3---摇一摇样式

在开始之前,不得不说CSS3 的功能是真的强大.话不多说,直接上代码

HTML:

看我摇得的多开心

CSS

@keyframes shake-slow {

0% {

-webkit-transform: translate(0px, 0px) rotate(0deg)

}

2% {

-webkit-transform: translate(-1px, 8px) rotate(1.5deg)

}

4% {

-webkit-transform: translate(7px, 0px) rotate(-0.5deg)

}

6% {

-webkit-transform: translate(8px, 8px) rotate(-3.5deg)

}

8% {

-webkit-transform: translate(-4px, -3px) rotate(-1.5deg)

}

10% {

-webkit-transform: translate(5px, 0px) rotate(-2.5deg)

}

12% {

-webkit-transform: translate(-10px, -3px) rotate(-3.5deg)

}

14% {

-webkit-transform: translate(5px, 7px) rotate(2.5deg)

}

16% {

-webkit-transform: translate(8px, -8px) rotate(-1.5deg)

}

18% {

-webkit-transform: translate(9px, -6px) rotate(-3.5deg)

}

20% {

-webkit-transform: translate(3px, 1px) rotate(-0.5deg)

}

22% {

-webkit-transform: translate(6px, 8px) rotate(-2.5deg)

}

24% {

-webkit-transform: translate(-8px, -1px) rotate(2.5deg)

}

26% {

-webkit-transform: translate(7px, -10px) rotate(0.5deg)

}

28% {

-webkit-transform: translate(7px, -4px) rotate(-3.5deg)

}

30% {

-webkit-transform: translate(-2px, -6px) rotate(-1.5deg)

}

32% {

-webkit-transform: translate(-1px, 0px) rotate(2.5deg)

}

34% {

-webkit-transform: translate(6px, 2px) rotate(-0.5deg)

}

36% {

-webkit-transform: translate(2px, 7px) rotate(1.5deg)

}

38% {

-webkit-transform: translate(2px, -9px) rotate(1.5deg)

}

40% {

-webkit-transform: translate(-5px, -1px) rotate(-0.5deg)

}

42% {

-webkit-transform: translate(-8px, 2px) rotate(-0.5deg)

}

44% {

-webkit-transform: translate(-4px, 3px) rotate(0.5deg)

}

46% {

-webkit-transform: translate(-10px, -2px) rotate(-0.5deg)

}

48% {

-webkit-transform: translate(1px, 9px) rotate(1.5deg)

}

50% {

-webkit-transform: translate(6px, 7px) rotate(1.5deg)

}

52% {

-webkit-transform: translate(-8px, 4px) rotate(0.5deg)

}

54% {

-webkit-transform: translate(6px, -8px) rotate(-2.5deg)

}

56% {

-webkit-transform: translate(2px, -9px) rotate(-2.5deg)

}

58% {

-webkit-transform: translate(-2px, -9px) rotate(0.5deg)

}

60% {

-webkit-transform: translate(2px, 7px) rotate(-0.5deg)

}

62% {

-webkit-transform: translate(0px, 0px) rotate(-1.5deg)

}

64% {

-webkit-transform: translate(-8px, -4px) rotate(-3.5deg)

}

66% {

-webkit-transform: translate(6px, -6px) rotate(0.5deg)

}

68% {

-webkit-transform: translate(0px, -7px) rotate(-2.5deg)

}

70% {

-webkit-transform: translate(-8px, 1px) rotate(1.5deg)

}

72% {

-webkit-transform: translate(-7px, 9px) rotate(2.5deg)

}

74% {

-webkit-transform: translate(2px, -6px) rotate(-0.5deg)

}

76% {

-webkit-transform: translate(5px, 1px) rotate(-0.5deg)

}

78% {

-webkit-transform: translate(-1px, 5px) rotate(2.5deg)

}

80% {

-webkit-transform: translate(3px, 7px) rotate(2.5deg)

}

82% {

-webkit-transform: translate(-6px, -7px) rotate(-0.5deg)

}

84% {

-webkit-transform: translate(-8px, 8px) rotate(-2.5deg)

}

86% {

-webkit-transform: translate(5px, 3px) rotate(-2.5deg)

}

88% {

-webkit-transform: translate(-4px, 3px) rotate(-1.5deg)

}

90% {

-webkit-transform: translate(-5px, -4px) rotate(-3.5deg)

}

92% {

-webkit-transform: translate(-5px, 4px) rotate(2.5deg)

}

94% {

-webkit-transform: translate(-4px, -4px) rotate(-3.5deg)

}

96% {

-webkit-transform: translate(-3px, 2px) rotate(-3.5deg)

}

98% {

-webkit-transform: translate(2px, 1px) rotate(-0.5deg)

}

}

有兴趣的小伙伴可以自己试试哦