快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

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

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

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

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

如下图照片所示

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

如何利用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;    }

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


分享文章：如何利用css3和jquery制作一款恶搞头像特效
分享路径：http://6mz.cn/article/jejecs.html

其他资讯