如何利用css3和jquery制作一款惡搞頭像特效

如何利用css3和jquery制作一款惡搞頭像特效，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

這款實例中，一個頭像在畫面中跳舞，頭像還有可愛的帽子，單擊下面的按鈕可以為頭像切換不同的帽子。

如下圖照片所示

　　實現的代碼。

　　html代碼：

XML/HTML Code復制內容到剪貼板

1. <div class="wwiaftm-container">  
           <div class="base wwiaftm">  
               <div class="body-1 wwiaftm">  
                   <div class="body-2 wwiaftm">  
                       <div class="hat wwiaftm" style="background-image: url(Mini_Sombrero.png)">  
                       </div>  
                       <div class="head wwiaftm">  
                           <div class="profile">  
                               <img src="head.png">  
                           </div>  
                       </div>  
                       <div class="wwiaftm arm-1 left">  
                           <div class="wwiaftm arm-2 left">  
                               <div class="wwiaftm fingers">  
                               </div>  
                           </div>  
                       </div>  
                       <div class="wwiaftm arm-1 right">  
                           <div class="wwiaftm arm-2 right">  
                               <div class="wwiaftm fingers">  
                               </div>  
                           </div>  
                       </div>  
                   </div>  
               </div>  
           </div>  
       </div>  
       <div class="switch-container">  
           <button id="hat-switch">  
               Hat Me!</button>  
       </div>  
       <script src='jquery.min.js'></script>  
       <script>        var hats = Array(   
     'Mini_Sombrero.png', 'med.png',   
     'svg.med.png',   
     'cartoon-cowboy-8.gif',   
     '1313955-witch-hat-002_92007.gif',   
     'hat_mario_101401.jpg',   
     'vector-hat-design1.jpg'   
   );   
     
           $('#hat-switch').on('click', function (e) {   
               e.preventDefault();   
               var hat = hats[Math.floor(Math.random() * hats.length)];   
               $('.hat').css('background-image', 'url(' + hat + ')');   
           });   
           //@ sourceURL=pen.js   
       </script>  
   　　css3代碼：
   CSS Code復制內容到剪貼板
   .wwiaftm-container {   
     position: relative;   
     width: 200px;   
     height: 275px;   
     margin: auto;   
     padding-top: 100px;   
   }   
     
   .profile {   
     border-radius: 100px;   
     overflow: hidden;   
   }   
     
   .wwiaftm {   
     background: #48e0a4;   
     position: absolute;   
     margin: auto;   
     border-radius: 25%;   
   }   
     
   .body-1 {   
     background-repeat: no-repeat;   
     background-position: center;   
     background-size: 70%;   
   }   
     
   .base {   
     width: 60px;   
     height: 80px;   
     bottombottom: 0;   
     left: 0;   
     rightright: 0;   
   }   
     
   .hat {   
     top: -120px;   
     height: 80px;   
     width: 100px;   
     -webkit-transform-origin: 50% 100%;   
     transform-origin: 50% 100%;   
     -webkit-transform: rotate3d(0,0,1,0deg);   
     transform: rotate3d(0,0,1,0deg);   
     background-repeat: no-repeat;   
     background-position: center;   
     background-color: transparent;   
     background-size: 100%;   
     z-index: 10 !important;   
   }   
     
   .body-1, .body-2, .head {   
     top: -60px;   
     height: 80px;   
     width: 60px;   
     -webkit-transform-origin: 50% 100%;   
     transform-origin: 50% 100%;   
     -webkit-transform: rotate3d(0,0,1,0deg);   
     transform: rotate3d(0,0,1,0deg);   
   }   
     
   .body-1 {   
     -webkit-animation: flail 4s linear infinite;   
     animation: flail 4s linear infinite;   
   }   
     
   .body-2 {   
     -webkit-animation: flail 3s linear infinite;   
     animation: flail 3s linear infinite;   
   }   
     
   .head, .hat {   
     -webkit-animation: flail 2s linear infinite;   
     animation: flail 2s linear infinite;   
     z-index: 1;   
   }   
     
   .head .eye, .head .mouth {   
     height: 20%;   
     width: 15%;   
     background: black;   
     position: absolute;   
     top: 25%;   
   }   
     
   .head .eye.rightright {   
     rightright: 20%;   
   }   
     
   .head .eye.left {   
     left: 20%;   
   }   
     
   .head .mouth {   
     width: 70%;   
     top: 60%;   
     height: 5%;   
     left: 0;   
     rightright: 0;   
     margin: auto;   
   }   
     
   .arm-1, .arm-2 {   
     position: absolute;   
     width: 50px;   
     height: 20px;   
     rightright: 90%;   
     top: 25%;   
     -webkit-animation: flail 1s linear infinite;   
     animation: flail 1s linear infinite;   
     -webkit-transform-origin: 100% 50%;   
     transform-origin: 100% 50%;   
   }   
     
   .arm-1.rightright, .arm-2.rightright {   
     left: 90%;   
     -webkit-transform-origin: 0% 50%;   
     transform-origin: 0% 50%;   
   }   
     
   .arm-1 .arm-2 {   
     -webkit-animation: flail .5s linear infinite;   
     animation: flail .5s linear infinite;   
     rightright: 80%;   
     top: auto;   
   }   
     
   .arm-1 .arm-2.rightright {   
     left: 80%;   
     rightright: auto;   
   }   
     
   @-webkit-keyframes flail {   
     0% {   
       -webkit-transform: rotate3d(0,0,1,0deg);   
     }   
     25% {   
       -webkit-transform: rotate3d(0,0,1,50deg);   
     }   
     50% {   
       -webkit-transform: rotate3d(0,0,1,0deg);   
     }   
     75% {   
       -webkit-transform: rotate3d(0,0,1,-50deg);   
     }   
     100% {   
       -webkit-transform: rotate3d(0,0,1,0deg);   
     }   
   }   
     
   @keyframes flail {   
     0% {   
       transform: rotate3d(0,0,1,0deg);   
     }   
     25% {   
       transform: rotate3d(0,0,1,50deg);   
     }   
     50% {   
       transform: rotate3d(0,0,1,0deg);   
     }   
     75% {   
       transform: rotate3d(0,0,1,-50deg);   
     }   
     100% {   
       transform: rotate3d(0,0,1,0deg);   
     }   
   }   
     
   .switch-container {   
     text-align: center;   
     margin-top: 25px;   
   }   
     
   #hat-switch {   
     text-align: center;   
     font-size: 24px;   
     cursor: pointer;   
   }

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業(yè)資訊頻道，感謝您對億速云的支持。