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

如何利用css3和jquery制作一款恶搞头像特效，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

这款实例中，一个头像在画面中跳舞，头像还有可爱的帽子，单击下面的按钮可以为头像切换不同的帽子。

如下图照片所示

　　实现的代码。

　　html代码：

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

1.           
                 
                     
                         
                         
                         
                             
                                                           
                         
                         
                             
                                 
                                 
                             
                         
                         
                             
                                 
                                 
                             
                         
                     
                 
             
         
         
                           Hat Me!      
                 　　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;   }

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注行业资讯频道，感谢您对的支持。