如何利用css3和jquery制作一款恶搞头像特效,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子。
如下图照片所示
实现的代码。
html代码:
XML/HTML Code复制内容到剪贴板
<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; }
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。