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

网络
树缝里也漏着一两点路灯光，没精打彩的，是渴睡人的眼。春尚浅，几处山顶上的梅花却挣扎着吐出红苞来。微风柔和地吹，柔和地爱抚我的面孔。荷塘里的荷花都羞涩地打着朵。落叶随着风高低起舞。

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

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <divclass="wwiaftm-container">
  2. <divclass="basewwiaftm">
  3. <divclass="body-1wwiaftm">
  4. <divclass="body-2wwiaftm">
  5. <divclass="hatwwiaftm"style="background-image:url(Mini_Sombrero.png)">
  6. </div>
  7. <divclass="headwwiaftm">
  8. <divclass="profile">
  9. <imgsrc="head.png">
  10. </div>
  11. </div>
  12. <divclass="wwiaftmarm-1left">
  13. <divclass="wwiaftmarm-2left">
  14. <divclass="wwiaftmfingers">
  15. </div>
  16. </div>
  17. </div>
  18. <divclass="wwiaftmarm-1right">
  19. <divclass="wwiaftmarm-2right">
  20. <divclass="wwiaftmfingers">
  21. </div>
  22. </div>
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. </div>
  28. <divclass="switch-container">
  29. <buttonid="hat-switch">
  30. HatMe!</button>
  31. </div>
  32. <scriptsrc='jquery.min.js'></script>
  33. <script>varhats=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. varhat=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. }
  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. bottombottom:0;
  31. left:0;
  32. rightright: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. background-color: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:flail4slinearinfinite;
  62. animation:flail4slinearinfinite;
  63. }
  65. .body-2{
  66. -webkit-animation:flail3slinearinfinite;
  67. animation:flail3slinearinfinite;
  68. }
  70. .head,.hat{
  71. -webkit-animation:flail2slinearinfinite;
  72. animation:flail2slinearinfinite;
  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.rightright{
  85. rightright: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. rightright:0;
  98. margin:auto;
  99. }
  101. .arm-1,.arm-2{
  102. position:absolute;
  103. width:50px;
  104. height:20px;
  105. rightright:90%;
  106. top:25%;
  107. -webkit-animation:flail1slinearinfinite;
  108. animation:flail1slinearinfinite;
  109. -webkit-transform-origin:100%50%;
  110. transform-origin:100%50%;
  111. }
  113. .arm-1.rightright,.arm-2.rightright{
  114. left:90%;
  115. -webkit-transform-origin:0%50%;
  116. transform-origin:0%50%;
  117. }
  119. .arm-1.arm-2{
  120. -webkit-animation:flail.5slinearinfinite;
  121. animation:flail.5slinearinfinite;
  122. rightright:80%;
  123. top:auto;
  124. }
  126. .arm-1.arm-2.rightright{
  127. left:80%;
  128. rightright:auto;
  129. }
  131. @-webkit-keyframesflail{
  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. @keyframesflail{
  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. }
    177. 　　

到此这篇关于一款恶搞头像特效的制作过程 如何利用css3和jquery就介绍到这了。不要为失去的事物后悔，这是一种无比豁达的心态，过去的事情就让他过去把。更多相关一款恶搞头像特效的制作过程 如何利用css3和jquery内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

您可能有感兴趣的文章
兼做美工之导航条制作过程分享