一款恶搞头像特效的制作过程利用css3和jquery

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

　　实现的代码。

　　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>