利用css3和jquery制作头像特效
发布时间：2014-11-21 09:49:06 作者：佚名 
我要评论
我要评论今天给大家介绍一款头像特效的制作过程，你可以把任意一张照片放到跳舞的漫画中，为他带上不同的帽子，让他翩翩起舞，下面我们一起来看一下制作过程和效果
今天给大家分享一款基于jquery和css3的头像特效。这款实例中，一个头像在画面中跳舞，头像还有可爱的帽子，单击下面的按钮可以为头像切换不同的帽子。如下图照片中头像左右摇晃，很搞笑，大家也可以自己尝试制作哦。
实现的代码。
html代码：
<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>
<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代码：
.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;
} 相关文章
CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局，本文介绍CSS3 最强二维布局系2025-02-27- 本文介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同2025-02-27
文章介绍了如何使用CSS3实现一个雷达探测扫描的效果,包括夜色背景、蜘蛛网盘、扫描体的转动效果、尾巴阴影以及被扫描到的光点,通过HTML和CSS的配合,实现了丰富的动画效果,2025-02-21- CSS3的Flexbox是一种强大的布局模式,通过设置display:flex可以轻松实现对齐、排列和分布网页元素,它解决了传统布局方法中的对齐、间距分配和自适应布局等问题,接下来通过本2025-02-19
本文给大家介绍css3 实现icon刷新转动效果，文章开头给大家介绍了webkit-transform、animation、@keyframes这三个属性，结合实例代码给大家介绍的非常详细，感兴趣的朋友一2025-02-19- CSS3过渡属性用于实现元素从一种样式平滑过渡到另一种样式,通过设置transition-property过渡属性、transition-duration过渡时长transition-timing-function过渡函数和trans2025-02-19
- 本文介绍了如何使用CSS3创建一个简单的动态旋转加载样式,通过定义一个带有类名“loader”的HTML元素,并使用CSS样式和@keyframes规则来实现旋转动画,你可以根据需要调整样式2025-02-19
- 这篇文章主要介绍了如何使用CSS3的transition属性实现平滑的过渡动画，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友一起看看吧2025-02-13
本文介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果，感兴趣的朋2025-02-11- CSS3和SVG的结合使用为网页设计带来了创新的动态视觉效果,本文通过一个圆形进度条的动画特效示例,展示了如何利用CSS3的动画功能和SVG的矢量图形能力来创建丰富的用户交互体2024-10-24
最新评论