一款基于jquery和css3的头像恶搞特效

今天给大家分享一款基于jquery和css3的头像恶搞特效。这款实例中，一个头像在画面中跳舞，头像还有可爱的帽子，单击下面的按钮可以为头像切换不同的帽子。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

1. <div class="wwiaftm-container">
2. <div class="base wwiaftm">
3. <div class="body-1 wwiaftm">
4. <div class="body-2 wwiaftm">
5. <div class="hat wwiaftm" style="background-image: url(Mini_Sombrero.png)">
6. </div>
7. <div class="head wwiaftm">
8. <div class="profile">
9. <img src="head.png">
10. </div>
11. </div>
12. <div class="wwiaftm arm-1 left">
13. <div class="wwiaftm arm-2 left">
14. <div class="wwiaftm fingers">
15. </div>
16. </div>
17. </div>
18. <div class="wwiaftm arm-1 right">
19. <div class="wwiaftm arm-2 right">
20. <div class="wwiaftm fingers">
21. </div>
22. </div>
23. </div>
24. </div>
25. </div>
26. </div>
27. </div>
28. <div class="switch-container">
29. <button id="hat-switch">
30. Hat Me!</button>
31. </div>
32. <script src='jquery.min.js'></script>
33. <script>        var hats = Array(
34. 'Mini_Sombrero.png', 'med.png',
35. 'svg.med.png',
36. 'cartoon-cowboy-8.gif',
37. '1313955-witch-hat-002_92007.gif',
38. 'hat_mario_101401.jpg',
39. 'vector-hat-design1.jpg'
40. );
41. $('#hat-switch').on('click', function (e) {
42. e.preventDefault();
43. var hat = hats[Math.floor(Math.random() * hats.length)];
44. $('.hat').css('background-image', 'url(' + hat + ')');
45. });
46. //@ sourceURL=pen.js
47. </script>

css3代码：

1. .wwiaftm-container {
2. position: relative;
3. width: 200px;
4. height: 275px;
5. margin: auto;
6. padding-top: 100px;
7. }
8. .profile {
9. border-radius: 100px;
10. overflow: hidden;
11. }
12. .wwiaftm {
13. background: #48e0a4;
14. position: absolute;
15. margin: auto;
16. border-radius: 25%;
17. }
18. .body-1 {
19. background-repeat: no-repeat;
20. background-position: center;
21. background-size: 70%;
22. }
23. .base {
24. width: 60px;
25. height: 80px;
26. bottom: 0;
27. left: 0;
28. right: 0;
29. }
30. .hat {
31. top: -120px;
32. height: 80px;
33. width: 100px;
34. -webkit-transform-origin: 50% 100%;
35. transform-origin: 50% 100%;
36. -webkit-transform: rotate3d(0,0,1,0deg);
37. transform: rotate3d(0,0,1,0deg);
38. background-repeat: no-repeat;
39. background-position: center;
40. transparent;
41. background-size: 100%;
42. z-index: 10 !important;
43. }
44. .body-1, .body-2, .head {
45. top: -60px;
46. height: 80px;
47. width: 60px;
48. -webkit-transform-origin: 50% 100%;
49. transform-origin: 50% 100%;
50. -webkit-transform: rotate3d(0,0,1,0deg);
51. transform: rotate3d(0,0,1,0deg);
52. }
53. .body-1 {
54. -webkit-animation: flail 4s linear infinite;
55. animation: flail 4s linear infinite;
56. }
57. .body-2 {
58. -webkit-animation: flail 3s linear infinite;
59. animation: flail 3s linear infinite;
60. }
61. .head, .hat {
62. -webkit-animation: flail 2s linear infinite;
63. animation: flail 2s linear infinite;
64. z-index: 1;
65. }
66. .head .eye, .head .mouth {
67. height: 20%;
68. width: 15%;
69. background: black;
70. position: absolute;
71. top: 25%;
72. }
73. .head .eye.right {
74. right: 20%;
75. }
76. .head .eye.left {
77. left: 20%;
78. }
79. .head .mouth {
80. width: 70%;
81. top: 60%;
82. height: 5%;
83. left: 0;
84. right: 0;
85. margin: auto;
86. }
87. .arm-1, .arm-2 {
88. position: absolute;
89. width: 50px;
90. height: 20px;
91. right: 90%;
92. top: 25%;
93. -webkit-animation: flail 1s linear infinite;
94. animation: flail 1s linear infinite;
95. -webkit-transform-origin: 100% 50%;
96. transform-origin: 100% 50%;
97. }
98. .arm-1.right, .arm-2.right {
99. left: 90%;
100. -webkit-transform-origin: 0% 50%;
101. transform-origin: 0% 50%;
102. }
103. .arm-1 .arm-2 {
104. -webkit-animation: flail .5s linear infinite;
105. animation: flail .5s linear infinite;
106. right: 80%;
107. top: auto;
108. }
109. .arm-1 .arm-2.right {
110. left: 80%;
111. right: auto;
112. }
113. @-webkit-keyframes flail {
114. 0% {
115. -webkit-transform: rotate3d(0,0,1,0deg);
116. }
117. 25% {
118. -webkit-transform: rotate3d(0,0,1,50deg);
119. }
120. 50% {
121. -webkit-transform: rotate3d(0,0,1,0deg);
122. }
123. 75% {
124. -webkit-transform: rotate3d(0,0,1,-50deg);
125. }
126. 100% {
127. -webkit-transform: rotate3d(0,0,1,0deg);
128. }
129. }
130. @keyframes flail {
131. 0% {
132. transform: rotate3d(0,0,1,0deg);
133. }
134. 25% {
135. transform: rotate3d(0,0,1,50deg);
136. }
137. 50% {
138. transform: rotate3d(0,0,1,0deg);
139. }
140. 75% {
141. transform: rotate3d(0,0,1,-50deg);
142. }
143. 100% {
144. transform: rotate3d(0,0,1,0deg);
145. }
146. }
147. .switch-container {
148. text-align: center;
149. margin-top: 25px;
150. }
151. #hat-switch {
152. text-align: center;
153. font-size: 24px;
154. cursor: pointer;
155. }