今天给大家分享一款基于jquery和css3的头像恶搞特效。这款实例中，一个头像在画面中跳舞，头像还有可爱的帽子，单击下面的按钮可以为头像切换不同的帽子。如下图照片中头像左右摇晃，很搞笑，大家也可以自己尝试制作哦。

实现的代码。

html代码：

XML/HTML Code复制内容到剪贴板 <divclass="wwiaftm-container"> <divclass="basewwiaftm"> <divclass="body-1wwiaftm"> <divclass="body-2wwiaftm"> <divclass="hatwwiaftm"style="background-image:url(Mini_Sombrero.png)"> </div> <divclass="headwwiaftm"> <divclass="profile"> <imgsrc="head.png"> </div> </div> <divclass="wwiaftmarm-1left"> <divclass="wwiaftmarm-2left"> <divclass="wwiaftmfingers"> </div> </div> </div> <divclass="wwiaftmarm-1right"> <divclass="wwiaftmarm-2right"> <divclass="wwiaftmfingers"> </div> </div> </div> </div> </div> </div> </div> <divclass="switch-container"> <buttonid="hat-switch"> HatMe!</button> </div> <scriptsrc='jquery.min.js'></script> <script>varhats=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(); varhat=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:flail4slinearinfinite; animation:flail4slinearinfinite; } .body-2{ -webkit-animation:flail3slinearinfinite; animation:flail3slinearinfinite; } .head,.hat{ -webkit-animation:flail2slinearinfinite; animation:flail2slinearinfinite; 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:flail1slinearinfinite; animation:flail1slinearinfinite; -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.5slinearinfinite; animation:flail.5slinearinfinite; rightright:80%; top:auto; } .arm-1.arm-2.rightright{ left:80%; rightright:auto; } @-webkit-keyframesflail{ 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); } } @keyframesflail{ 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】相关文章：

★ CSS3边框-边框颜色(border-color)

★ CSS上下文选择符实现基于位置为HTML元素添加样式

★ 纯css实现的tab切换效果

★ 用css控制标题字符溢出,用省略号表示

★ 如何让某个页面使用特定的CSS

★ CSS应用基础教程(1) 基本认识

★ 关于清除浮动塌陷的几种方法总结

★ css中使input输入框与img(图片)在同一行居中对齐

★ 邮箱css加载失败怎么办

★ css3学习心得分享