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

2022-11-03 09:36:07

今天给大家分享一款基于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. }
上一篇：NET基础（1）：类型基础


下一篇：7 款灵巧实用的 CSS3/jQuery 工具