一款恶搞头像特效的制作过程 利用css3和jquery

今天给大家分享一款基于jquery和css3的头像恶搞特效。这款实例中，一个头像在画面中跳舞，头像还有可爱的帽子，单击下面的按钮可以为头像切换不同的帽子。如下图照片中头像左右摇晃，很搞笑，大家也可以自己尝试制作哦。

实现的代码。

html代码：

XML/HTML Code复制内容到剪贴板

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.   
42.         $('#hat-switch').on('click', function (e) {   
43.             e.preventDefault();   
44.             var hat = hats[Math.floor(Math.random() * hats.length)];   
45.             $('.hat').css('background-image', 'url(' + hat + ')');   
46.         });   
47.         //@ sourceURL=pen.js   
48.     </script>  

css3代码：

CSS Code复制内容到剪贴板

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