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

CSS教程更新时间：2026-04-01 20:13:08 发布时间：1848天前 IT归档最新发布模块sitemap 名妆网法律咨询聚返吧英语巴士网伯小乐网商动力

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

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板

Hat Me!

　　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;
}

转载请注明：文章转载自 www.mshxw.com

本文地址：https://www.mshxw.com/it/216547.html

上一篇详解PNG图片

下一篇 IE6的3像素 bug解决方案分享

CSS教程相关栏目本月热门文章

关于我们文章归档网站地图联系我们

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

CSS教程相关栏目本月热门文章

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