如何利用css3和jquery制作一款恶搞头像特效-梓潼大橙子建站

RELATEED CONSULTING

新闻中心

这里有您想知道的互联网营销解决方案

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

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

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

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

如下图照片所示

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

实现的代码。

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://sczitong.cn/article/jejecs.html

其他资讯

快速导航

友情链接

网站建设

联系方式

企业：青羊区大橙子信息咨询工作室
地址：成都市青羊区太升南路288号
电话：18980820575
网址：www.sczitong.cn

公司名称：青羊区大橙子信息咨询工作室联系电话：18980820575

网站备案号：蜀ICP备2022028542号-23

梓潼大橙子建站梓潼网站建设梓潼网站设计梓潼网站制作成都做网站