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


Posted in HTML / CSS onNovember 21, 2014

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

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

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

实现的代码。

html代码:

XML/HTML Code复制内容到剪贴板
  1. <div class="wwiaftm-container">  
  2.         <div class="base wwiaftm">  
  3.             <div class="body-1 wwiaftm">  
  4.                 <div class="body-2 wwiaftm">  
  5.                     <div class="hat wwiaftm" style="background-image: url(Mini_Sombrero.png)">  
  6.                     </div>  
  7.                     <div class="head wwiaftm">  
  8.                         <div class="profile">  
  9.                             <img src="head.png">  
  10.                         </div>  
  11.                     </div>  
  12.                     <div class="wwiaftm arm-1 left">  
  13.                         <div class="wwiaftm arm-2 left">  
  14.                             <div class="wwiaftm fingers">  
  15.                             </div>  
  16.                         </div>  
  17.                     </div>  
  18.                     <div class="wwiaftm arm-1 right">  
  19.                         <div class="wwiaftm arm-2 right">  
  20.                             <div class="wwiaftm fingers">  
  21.                             </div>  
  22.                         </div>  
  23.                     </div>  
  24.                 </div>  
  25.             </div>  
  26.         </div>  
  27.     </div>  
  28.     <div class="switch-container">  
  29.         <button id="hat-switch">  
  30.             Hat Me!</button>  
  31.     </div>  
  32.     <script src='jquery.min.js'></script>  
  33.     <script>        var hats = Array(   
  34.   'Mini_Sombrero.png', 'med.png',   
  35.   'svg.med.png',   
  36.   'cartoon-cowboy-8.gif',   
  37.   '1313955-witch-hat-002_92007.gif',   
  38.   'hat_mario_101401.jpg',   
  39.   'vector-hat-design1.jpg'   
  40. );   
  41.   
  42.         $('#hat-switch').on('click', function (e) {   
  43.             e.preventDefault();   
  44.             var hat = hats[Math.floor(Math.random() * hats.length)];   
  45.             $('.hat').css('background-image', 'url(' + hat + ')');   
  46.         });   
  47.         //@ sourceURL=pen.js   
  48.     </script>  

css3代码:

CSS Code复制内容到剪贴板
  1. .wwiaftm-container {   
  2.   positionrelative;   
  3.   width200px;   
  4.   height275px;   
  5.   marginauto;   
  6.   padding-top100px;   
  7. }   
  8.   
  9. .profile {   
  10.   border-radius: 100px;   
  11.   overflowhidden;   
  12. }   
  13.   
  14. .wwiaftm {   
  15.   background#48e0a4;   
  16.   positionabsolute;   
  17.   marginauto;   
  18.   border-radius: 25%;   
  19. }   
  20.   
  21. .body-1 {   
  22.   background-repeatno-repeat;   
  23.   background-positioncenter;   
  24.   background-size: 70%;   
  25. }   
  26.   
  27. .base {   
  28.   width60px;   
  29.   height80px;   
  30.   bottombottom: 0;   
  31.   left: 0;   
  32.   rightright: 0;   
  33. }   
  34.   
  35. .hat {   
  36.   top: -120px;   
  37.   height80px;   
  38.   width100px;   
  39.   -webkit-transform-origin: 50% 100%;   
  40.   transform-origin: 50% 100%;   
  41.   -webkit-transform: rotate3d(0,0,1,0deg);   
  42.   transform: rotate3d(0,0,1,0deg);   
  43.   background-repeatno-repeat;   
  44.   background-positioncenter;   
  45.   background-colortransparent;   
  46.   background-size: 100%;   
  47.   z-index: 10 !important;   
  48. }   
  49.   
  50. .body-1, .body-2, .head {   
  51.   top: -60px;   
  52.   height80px;   
  53.   width60px;   
  54.   -webkit-transform-origin: 50% 100%;   
  55.   transform-origin: 50% 100%;   
  56.   -webkit-transform: rotate3d(0,0,1,0deg);   
  57.   transform: rotate3d(0,0,1,0deg);   
  58. }   
  59.   
  60. .body-1 {   
  61.   -webkit-animation: flail 4s linear infinite;   
  62.   animation: flail 4s linear infinite;   
  63. }   
  64.   
  65. .body-2 {   
  66.   -webkit-animation: flail 3s linear infinite;   
  67.   animation: flail 3s linear infinite;   
  68. }   
  69.   
  70. .head, .hat {   
  71.   -webkit-animation: flail 2s linear infinite;   
  72.   animation: flail 2s linear infinite;   
  73.   z-index: 1;   
  74. }   
  75.   
  76. .head .eye, .head .mouth {   
  77.   height: 20%;   
  78.   width: 15%;   
  79.   backgroundblack;   
  80.   positionabsolute;   
  81.   top: 25%;   
  82. }   
  83.   
  84. .head .eye.rightright {   
  85.   rightright: 20%;   
  86. }   
  87.   
  88. .head .eye.left {   
  89.   left: 20%;   
  90. }   
  91.   
  92. .head .mouth {   
  93.   width: 70%;   
  94.   top: 60%;   
  95.   height: 5%;   
  96.   left: 0;   
  97.   rightright: 0;   
  98.   marginauto;   
  99. }   
  100.   
  101. .arm-1, .arm-2 {   
  102.   positionabsolute;   
  103.   width50px;   
  104.   height20px;   
  105.   rightright: 90%;   
  106.   top: 25%;   
  107.   -webkit-animation: flail 1s linear infinite;   
  108.   animation: flail 1s linear infinite;   
  109.   -webkit-transform-origin: 100% 50%;   
  110.   transform-origin: 100% 50%;   
  111. }   
  112.   
  113. .arm-1.rightright, .arm-2.rightright {   
  114.   left: 90%;   
  115.   -webkit-transform-origin: 0% 50%;   
  116.   transform-origin: 0% 50%;   
  117. }   
  118.   
  119. .arm-1 .arm-2 {   
  120.   -webkit-animation: flail .5s linear infinite;   
  121.   animation: flail .5s linear infinite;   
  122.   rightright: 80%;   
  123.   topauto;   
  124. }   
  125.   
  126. .arm-1 .arm-2.rightright {   
  127.   left: 80%;   
  128.   rightrightauto;   
  129. }   
  130.   
  131. @-webkit-keyframes flail {   
  132.   0% {   
  133.     -webkit-transform: rotate3d(0,0,1,0deg);   
  134.   }   
  135.   25% {   
  136.     -webkit-transform: rotate3d(0,0,1,50deg);   
  137.   }   
  138.   50% {   
  139.     -webkit-transform: rotate3d(0,0,1,0deg);   
  140.   }   
  141.   75% {   
  142.     -webkit-transform: rotate3d(0,0,1,-50deg);   
  143.   }   
  144.   100% {   
  145.     -webkit-transform: rotate3d(0,0,1,0deg);   
  146.   }   
  147. }   
  148.   
  149. @keyframes flail {   
  150.   0% {   
  151.     transform: rotate3d(0,0,1,0deg);   
  152.   }   
  153.   25% {   
  154.     transform: rotate3d(0,0,1,50deg);   
  155.   }   
  156.   50% {   
  157.     transform: rotate3d(0,0,1,0deg);   
  158.   }   
  159.   75% {   
  160.     transform: rotate3d(0,0,1,-50deg);   
  161.   }   
  162.   100% {   
  163.     transform: rotate3d(0,0,1,0deg);   
  164.   }   
  165. }   
  166.   
  167. .switch-container {   
  168.   text-aligncenter;   
  169.   margin-top25px;   
  170. }   
  171.   
  172. #hat-switch {   
  173.   text-aligncenter;   
  174.   font-size24px;   
  175.   cursorpointer;   
  176. }  
HTML / CSS 相关文章推荐
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
html5定位获取当前位置并在百度地图上显示
Aug 22 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
Apr 24 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 #HTML / CSS
html5+css3气泡组件的实现
Nov 21 #HTML / CSS
纯css3实现的动画按钮的实例教程
Nov 17 #HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 #HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 #HTML / CSS
css3实现超炫风车特效
Nov 12 #HTML / CSS
用CSS3来实现社交分享按钮
Nov 11 #HTML / CSS
You might like
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
js实现拖拽上传图片功能
2017/08/01 Javascript
SVG实现时钟效果
2018/07/17 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
wxPython窗口中文乱码解决方法
2014/10/11 Python
Python打包可执行文件的方法详解
2016/09/19 Python
python实现文件的分割与合并
2019/08/29 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
关于Keras Dense层整理
2020/05/21 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
计算机专业毕业生的自我评价
2013/11/18 职场文书
便利店投资的创业计划书
2014/01/12 职场文书
拾金不昧的表扬信
2014/01/16 职场文书
年终晚会主持词
2014/03/25 职场文书
买卖合同协议书范本
2014/10/18 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS