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

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

创新互联是专业的武川网站建设公司，武川接单;提供成都网站建设、网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行武川网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

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

如下图照片所示

实现的代码。

html代码：

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

```
  
          
              
                  
                      
                    
```

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; }

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

分享名称：如何利用css3和jquery制作一款恶搞头像特效
标题链接：http://cxhlcq.com/article/jejecs.html