今天给大家分享一款基于jquery和css3的头像恶搞特效。这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

  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. $('#hat-switch').on('click', function (e) {
  42. e.preventDefault();
  43. var hat = hats[Math.floor(Math.random() * hats.length)];
  44. $('.hat').css('background-image', 'url(' + hat + ')');
  45. });
  46. //@ sourceURL=pen.js
  47. </script>

css3代码:

  1. .wwiaftm-container {
  2. position: relative;
  3. width: 200px;
  4. height: 275px;
  5. margin: auto;
  6. padding-top: 100px;
  7. }
  8. .profile {
  9. border-radius: 100px;
  10. overflow: hidden;
  11. }
  12. .wwiaftm {
  13. background: #48e0a4;
  14. position: absolute;
  15. margin: auto;
  16. border-radius: 25%;
  17. }
  18. .body-1 {
  19. background-repeat: no-repeat;
  20. background-position: center;
  21. background-size: 70%;
  22. }
  23. .base {
  24. width: 60px;
  25. height: 80px;
  26. bottom: 0;
  27. left: 0;
  28. right: 0;
  29. }
  30. .hat {
  31. top: -120px;
  32. height: 80px;
  33. width: 100px;
  34. -webkit-transform-origin: 50% 100%;
  35. transform-origin: 50% 100%;
  36. -webkit-transform: rotate3d(0,0,1,0deg);
  37. transform: rotate3d(0,0,1,0deg);
  38. background-repeat: no-repeat;
  39. background-position: center;
  40. transparent;
  41. background-size: 100%;
  42. z-index: 10 !important;
  43. }
  44. .body-1, .body-2, .head {
  45. top: -60px;
  46. height: 80px;
  47. width: 60px;
  48. -webkit-transform-origin: 50% 100%;
  49. transform-origin: 50% 100%;
  50. -webkit-transform: rotate3d(0,0,1,0deg);
  51. transform: rotate3d(0,0,1,0deg);
  52. }
  53. .body-1 {
  54. -webkit-animation: flail 4s linear infinite;
  55. animation: flail 4s linear infinite;
  56. }
  57. .body-2 {
  58. -webkit-animation: flail 3s linear infinite;
  59. animation: flail 3s linear infinite;
  60. }
  61. .head, .hat {
  62. -webkit-animation: flail 2s linear infinite;
  63. animation: flail 2s linear infinite;
  64. z-index: 1;
  65. }
  66. .head .eye, .head .mouth {
  67. height: 20%;
  68. width: 15%;
  69. background: black;
  70. position: absolute;
  71. top: 25%;
  72. }
  73. .head .eye.right {
  74. right: 20%;
  75. }
  76. .head .eye.left {
  77. left: 20%;
  78. }
  79. .head .mouth {
  80. width: 70%;
  81. top: 60%;
  82. height: 5%;
  83. left: 0;
  84. right: 0;
  85. margin: auto;
  86. }
  87. .arm-1, .arm-2 {
  88. position: absolute;
  89. width: 50px;
  90. height: 20px;
  91. right: 90%;
  92. top: 25%;
  93. -webkit-animation: flail 1s linear infinite;
  94. animation: flail 1s linear infinite;
  95. -webkit-transform-origin: 100% 50%;
  96. transform-origin: 100% 50%;
  97. }
  98. .arm-1.right, .arm-2.right {
  99. left: 90%;
  100. -webkit-transform-origin: 0% 50%;
  101. transform-origin: 0% 50%;
  102. }
  103. .arm-1 .arm-2 {
  104. -webkit-animation: flail .5s linear infinite;
  105. animation: flail .5s linear infinite;
  106. right: 80%;
  107. top: auto;
  108. }
  109. .arm-1 .arm-2.right {
  110. left: 80%;
  111. right: auto;
  112. }
  113. @-webkit-keyframes flail {
  114. 0% {
  115. -webkit-transform: rotate3d(0,0,1,0deg);
  116. }
  117. 25% {
  118. -webkit-transform: rotate3d(0,0,1,50deg);
  119. }
  120. 50% {
  121. -webkit-transform: rotate3d(0,0,1,0deg);
  122. }
  123. 75% {
  124. -webkit-transform: rotate3d(0,0,1,-50deg);
  125. }
  126. 100% {
  127. -webkit-transform: rotate3d(0,0,1,0deg);
  128. }
  129. }
  130. @keyframes flail {
  131. 0% {
  132. transform: rotate3d(0,0,1,0deg);
  133. }
  134. 25% {
  135. transform: rotate3d(0,0,1,50deg);
  136. }
  137. 50% {
  138. transform: rotate3d(0,0,1,0deg);
  139. }
  140. 75% {
  141. transform: rotate3d(0,0,1,-50deg);
  142. }
  143. 100% {
  144. transform: rotate3d(0,0,1,0deg);
  145. }
  146. }
  147. .switch-container {
  148. text-align: center;
  149. margin-top: 25px;
  150. }
  151. #hat-switch {
  152. text-align: center;
  153. font-size: 24px;
  154. cursor: pointer;
  155. }

一款基于jquery和css3的头像恶搞特效的更多相关文章

  1. 一款基于jquery和css3的响应式二级导航菜单

    今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. ...

  2. 一款基于jquery和css3实现的摩天轮式分享按钮

    之前分享了很多css3实现的按钮.今天要给大家带来一款基于jquery和css3实现的摩天轮式分享按钮.这款分享按钮页面底部有一个toggle按钮,单击该按钮,摩天轮按钮以动画的形式出现,各个分享按钮 ...

  3. 一款基于jquery的鼠标经过图片列表特效

    今天要给大家推荐一款基于jquery的鼠标经过图片列表特效.当鼠标经过列表图片的时候,图片放大,且有一个半透明的遮罩层随之移动.效果图如下: 在线预览   源码下载 实现的代码 html代码: < ...

  4. 一款基于jquery超炫的图片切换特效

    今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览   源码下载 来看下实现的 ...

  5. 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

    这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览   ...

  6. 4款基于jquery的列表图标动画切换特效

    网页中列表图标随处可见,特别是移动网页上,基本上的导航都采用了列表图标.今天给大家分享4款基于juqery的列表图标和关闭图标的动画切换特效.喜欢的网友赶紧收藏吧. 在线预览   源码下载 实现的代码 ...

  7. 10款基于jquery的web前端动画特效

    1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...

  8. 基于jQuery 3D旋转明星人物展示特效

    分享一款基于jQuery 3D旋转明星人物展示特效.这是一款来自百度换肤活动的明星旋转展示效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  9. 30款基于 jQuery & CSS3 的加载动画和进度条插件

    我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...

随机推荐

  1. Go基础--终端操作和文件操作

    终端操作 操作终端相关的文件句柄常量os.Stdin:标准输入os.Stdout:标准输出os.Stderr:标准错误输出 关于终端操作的代码例子: package main import " ...

  2. mysql数据库TINYINT取值范围详解

    分享下mysql中TINYINT的取值范围,很基础的一些内容. 在MySQL的数据类型中,Tinyint的取值范围是:带符号的范围是-128到127.无符号的范围是0到255(见官方<MySQL ...

  3. iOS_生成pem推送证书(用于百度云推送)

    具体步骤如下: 首先,需要一个pem的证书,该证书需要与开发时签名用的一致. 具体生成pem证书方法如下: 1. 登录到 iPhone Developer Connection Portal(http ...

  4. [IOS]开源库RegexKitLite正则表达式的使用

    1.去RegexKitLite下载类库,解压出来会有一个例子包及2个文件,其实用到的就这2个文件,添加到工程中. 2.工程中添加libicucore.dylib frameworks. 友情提醒:一般 ...

  5. Ultraedit使用小技巧

    4. 编辑文件如何加入时间戳 ?F7 快捷键即可.你试试看? 5. 为何拷贝(Copy)/粘贴(Paste)功能不能用了?不怕大家笑话,我有几次使用 UltraEdit的过程中发现拷贝与粘贴的内容是不 ...

  6. Java实现单链表翻转

    单链表翻转比方有例如以下链表: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZmVuZ3NoaXp0eQ==/font/5a6L5L2T/fontsize ...

  7. Robolectric使用教程

    转载请标明出处:http://blog.csdn.net/shensky711/article/details/53561172 本文出自: [HansChen的博客] 概述 怎样使用 为项目加入依赖 ...

  8. 关于在node项目使用ioredis遇到的几个坑

    1,在ioredis中使用redis命令的方法的时候,如果有2个以上的参数,必须使用then方法来接收返回的结果,比如: redis.hget('key','field').then(function ...

  9. C++中的static 成员变量的一些注意点

    C++中的static成员变量主要用来为多个对象共享数据 例: #include <iostream> using namespace std; class Student{ public ...

  10. lua -- 事件响应与局部变量

    -- 这里要注意的点是:虽然nAmount是局部变量,却在控件的响应函数中使用 -- 因为控件的响应函数是在该变量的区域内,所以可以用 -- 如果控件的响应函数在外部,那么该变量就要声明成为全局变量 ...