温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2021-09-14 17:49:01 来源:亿速云 阅读:155 作者:柒染 栏目:web开发

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

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

如下图照片所示

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

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

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI