A special Avatar spoof Effect Based on jquery and css3, jquerycss3

A special Avatar spoof Effect Based on jquery and css3, jquerycss3

Today we will share with you a special Avatar spoof Effect Based on jquery and css3. In this example, a avatar is dancing on the screen, and there are cute hats in the Avatar. You can click the button below to switch between different hats for the Avatar. As follows:

Download Online Preview source code

Implementation code.

Html code:

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

Css3 code:

Html code

1. . Wwiaftm-container {
2. Position: relative;
3. Width: 200px;
4. Height: 275px;
5. Margin: auto;
6. Padding-top: 100px;
7. }
9. . Profile {
10. Border-radius: 100px;
11. Overflow: hidden;
12. }
14. . Wwiaftm {
15. Background: #48e0a4;
16. Position: absolute;
17. Margin: auto;
18. Border-radius: 25%;
19. }
21. . Body-1 {
22. Background-repeat: no-repeat;
23. Background-position: center;
24. Background-size: 70%;
25. }
27. . Base {
28. Width: 60px;
29. Height: 80px;
30. Bottom: 0;
31. Left: 0;
32. Right: 0;
33. }
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. Transparent;
46. Background-size: 100%;
47. Z-index: 10! Important;
48. }
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. }
60. . Body-1 {
61. -Webkit-animation: flail 4S linear infinite;
62. Animation: flail 4S linear infinite;
63. }
65. . Body-2 {
66. -Webkit-animation: flail 3 s linear infinite;
67. Animation: flail 3 s linear infinite;
68. }
70. . Head,. hat {
71. -Webkit-animation: flail 2 s linear infinite;
72. Animation: flail 2 s linear infinite;
73. Z-index: 1;
74. }
76. . Head. eye,. head. mouth {
77. Height: 20%;
78. Width: 15%;
79. Background: black;
80. Position: absolute;
81. Top: 25%;
82. }
84. . Head. eye. right {
85. Right: 20%;
86. }
88. . Head. eye. left {
89. Left: 20%;
90. }
92. . Head. mouth {
93. Width: 70%;
94. Top: 60%;
95. Height: 5%;
96. Left: 0;
97. Right: 0;
98. Margin: auto;
99. }
101. . Arm-1,. arm-2 {
102. Position: absolute;
103. Width: 50px;
104. Height: 20px;
105. Right: 90%;
106. Top: 25%;
107. -Webkit-animation: flail 1 s linear infinite;
108. Animation: flail 1 s linear infinite;
109. -Webkit-transform-origin: 100% 50%;
110. Transform-origin: 100% 50%;
111. }
113. Arm-1.right,. arm-2.right {
114. Left: 90%;
115. -Webkit-transform-origin: 0% 50%;
116. Transform-origin: 0% 50%;
117. }
119. . Arm-1. arm-2 {
120. -Webkit-animation: flail. 5 s linear infinite;
121. Animation: flail. 5 s linear infinite;
122. Right: 80%;
123. Top: auto;
124. }
126. . Arm-1. arm-2.right {
127. Left: 80%;
128. Right: auto;
129. }
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. }
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. }
167. . Switch-container {
168. Text-align: center;
169. Margin-top: 25px;
170. }
172. # Hat-switch {
173. Text-align: center;
174. Font-size: 24px;
175. Cursor: pointer;
176. }