今天給大家分享一款基于jquery和css3的頭像惡搞特效。這款實例中，一個頭像在畫面中跳舞，頭像還有可愛的帽子，單擊下面的按鈕可以為頭像切換不同的帽子。

名單

名單1

實現(xiàn)的代碼。

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;

}

更多信息請查看IT技術專欄