一款惡搞頭像特效的制作過程利用css3和jquery

2024-07-11 08:30:19

字體：大中小

來源：轉載

供稿：網友

　　今天給大家分享一款基于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>