JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > 一款jquery和css3实现的卡通人物动画特效

一款jquery和css3实现的卡通人物动画特效

        之前为大家分享了很多jquery和css3的动画实例。今天给大家带来一款非常炫的jquery和css3实现的卡通人物动画特效。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

  1. <div class="wrapper">
  2.         <div class="border-circle" id="one">
  3.         </div>
  4.         <div class="border-circle" id="two">
  5.         </div>
  6.         <div class="background-circle">
  7.             <div class="triangle-light">
  8.             </div>
  9.             <div class="body">
  10.             </div>
  11.             <span class="shirt-text">W</span> <span class="shirt-text">E</span> <span class="shirt-text">
  12.                 ♥</span> <span class="shirt-text">S</span> <span class="shirt-text">A</span>
  13.             <span class="shirt-text">L</span> <span class="shirt-text">E</span> <span class="shirt-text">
  14.                 S</span>
  15.             <div class="triangle-dark">
  16.             </div>
  17.         </div>
  18.         <div class="arms">
  19.         </div>
  20.         <div class="head">
  21.             <div class="ear" id="left">
  22.             </div>
  23.             <div class="ear" id="right">
  24.             </div>
  25.             <div class="hair-main">
  26.                 <div class="sideburn" id="left">
  27.                 </div>
  28.                 <div class="sideburn" id="right">
  29.                 </div>
  30.                 <div class="hair-top">
  31.                 </div>
  32.                 <div class="hair-back">
  33.                 </div>
  34.             </div>
  35.             <div class="face">
  36.                 <div class="hair-bottom">
  37.                 </div>
  38.                 <div class="nose">
  39.                 </div>
  40.                 <div class="eye-shadow" id="left">
  41.                     <div class="eyebrow">
  42.                     </div>
  43.                     <div class="eye-one">
  44.                         <div class="iris">
  45.                         </div>
  46.                     </div>
  47.                 </div>
  48.                 <div class="eye-shadow" id="right">
  49.                     <div class="eyebrow">
  50.                     </div>
  51.                     <div class="eye-two">
  52.                         <div class="iris">
  53.                         </div>
  54.                     </div>
  55.                 </div>
  56.                 <div class="mouth">
  57.                 </div>
  58.                 <div class="shadow-wrapper">
  59.                     <div class="shadow">
  60.                     </div>
  61.                 </div>
  62.             </div>
  63.         </div>
  64.         <span class="music-note" id="one">[        DISCUZ_CODE_4        ]lt;/span> <span class="music-note" id="two">[        DISCUZ_CODE_4        ]lt;/span>
  65.     </div>
复制代码css3代码:
  1. body, html{
  2.   width:100%;
  3.   height:100%;
  4.   margin:0;
  5.   display: table;
  6.   text-align: center;
  7.   z-index:0;
  8. }

  9. .wrapper{
  10.   display: table-cell;
  11.   vertical-align: middle;
  12.   position: relative;
  13. }
  14. .background-circle{
  15.   width: 100vw;
  16.   height: 400px;
  17.   border-radius: 0%;
  18.   overflow: hidden;
  19.   z-index:-1;
  20.   margin: 0 auto;
  21.   background: #FFE6E1;
  22.   position: relative;
  23.   -webkit-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
  24.   -moz-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
  25.   -o-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
  26.   -ms-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
  27.   animation:grow 0.7s 1 ease;
  28.   -webkit-animation:grow 0.7s 1 ease;
  29.   transform-origin: center;
  30. }
  31. .border-circle{
  32.   width: 399px;
  33.   height: 399px;
  34.   border-radius: 100%;
  35.   position: absolute;
  36.   left: 50%;
  37.   top: 50%;
  38.   margin-left: -220px;
  39.   margin-top: -220px;  
  40.   border: 10px solid #FCB040;
  41.   -webkit-transform: scale(0);
  42.   transform: scale(0);
  43.   -webkit-transform-origin: center;
  44.   transform-origin: center;
  45. }
  46. .border-circle#one{
  47.   animation:border-pulse 1s 3.1s 1 ease;
  48.   animation-fill-mode: forwards;
  49.   -webkit-animation:border-pulse 1s 3.1s 1 ease;
  50.   -webkit-animation-fill-mode: forwards;
  51. }
  52. .border-circle#two{
  53.   animation:border-pulse 1s 3.3s 1 ease;
  54.   animation-fill-mode: forwards;
  55.   -webkit-animation:border-pulse 1s 3.3s 1 ease;
  56.   -webkit-animation-fill-mode: forwards;
  57. }

  58. .body{
  59.   width: 150px;
  60.   height: 600px;
  61.   margin: 0 auto;
  62.   background: #ff5200;
  63.   border-radius: 10%;
  64.   position: relative;
  65.   z-index:2;
  66.   top: 200px;
  67.   animation:body-enter 0.7s 0.2s 1 ease;
  68.   animation-fill-mode: forwards;
  69.   -webkit-animation:body-enter 0.7s 0.2s 1 ease;
  70.   -webkit-animation-fill-mode: forwards;
  71. /*  box-shadow: 2px 3px 4px rgba(0,0,0,.4);
  72. */}

  73. .head{
  74.   width: 156px;
  75.   height: 220px;
  76.   z-index:5;
  77.   border-radius: 100%;
  78.   background: #FFE4BE;
  79.   position: absolute;
  80.   top: 50%;
  81.   left: 50%;
  82.   margin-top: -210px;
  83.   margin-left: -80px;
  84.   animation:grow 0.7s 0.4s 1 ease, music-move 1s 3.3s infinite alternate ease-in-out;
  85.   -webkit-animation:grow 0.7s 0.4s 1 ease, music-move 1s 3.3s infinite alternate ease-in-out;
  86. /*
  87.   animation:grow 0.7s 0.4s 1 ease;
  88.   -webkit-animation:grow 0.7s 0.4s 1 ease;
  89. */
  90.   transform-origin: bottom;
  91.   -webkit-transform-origin: bottom;
  92. }

  93. .hair-main{
  94.   width:180px;
  95.   height: 0px;
  96.   background:#D8C078;
  97.   border-radius: 54px 54px 0px 0px;
  98.   margin-top: -10px;
  99.   animation:hair-anim 0.7s 0.9s 1 ease;
  100.   animation-fill-mode: forwards;
  101.   -webkit-animation:hair-anim 0.7s 0.9s 1 ease;
  102.   -webkit-animation-fill-mode: forwards;
  103.   position: relative;
  104.   z-index: 2;
  105. }

  106. .hair-back{
  107.   width:30px;
  108.   height: 0px;
  109.   background: #D8C078;
  110.   border-radius:40%;
  111.   right:-90%;
  112. animation:hairback-anim 0.7s 0.9s 1 ease;
  113.   animation-fill-mode: forwards;
  114.   -webkit-animation:hairback-anim 0.7s 0.9s 1 ease;
  115.   -webkit-animation-fill-mode: forwards;
  116.   position: relative;
  117.   z-index: 0;
  118. }
  119. .hair-top{
  120.   width: 128px;
  121.   height: 70px;
  122.   opacity: 0;
  123.   border-top-right-radius: 30px;
  124.   background: D8C078;
  125.   position: relative;
  126.   top: -17px;
  127.   left: 50%;
  128.   transform: translateX(-64px);
  129.   -webkit-transform: translateX(-64px);
  130.   transform-origin: right;
  131.   -webkit-transform-origin: right;
  132.   animation:hair-top-anim 0.7s 1s 1 ease;
  133.   -webkit-animation:hair-top-anim 0.7s 1s 1 ease;
  134.   animation-fill-mode: forwards;
  135.   -webkit-animation-fill-mode: forwards;
  136. }

  137. .hair-bottom{
  138.   width: 54px;
  139.   height: 50px;
  140.   opacity: 0;
  141.   border-bottom-left-radius: 25px;
  142.   background: #D8C078;
  143.   position: relative;
  144.   top: -20px;
  145.   left: 50%;
  146.   transform: translateX(-27px);
  147.   -webkit-transform: translateX(-27px);
  148.   transform-origin: left;
  149.   -webkit-transform-origin: left;
  150.   animation:hair-bottom-anim 0.7s 1.4s 1 ease;
  151.   -webkit-animation:hair-bottom-anim 0.7s 1.4s 1 ease;
  152.   animation-fill-mode: forwards;
  153.   -webkit-animation-fill-mode: forwards;
  154. }
  155.   
  156. .sideburn{
  157.   width: 8px;
  158.   height: 25px;
  159.   background:#D8C078;
  160.   position: absolute;
  161.   bottom: -25px;
  162.   opacity: 0;
  163.   animation:sideburn-anim 0.7s 0.9s 1 ease;
  164.   animation-fill-mode: forwards;
  165.   -webkit-animation:sideburn-anim 0.7s 0.9s 1 ease;
  166.   -webkit-animation-fill-mode: forwards;
  167. }

  168. .sideburn#left{
  169.   left: 12px;
  170. }

  171. .sideburn#right{
  172.   right: 12px;
  173. }

  174. .face{
  175.   width: 120px;
  176.   height: 0px;
  177.   border-radius: 20%;
  178.   background: #FFE4BE;
  179.   position: absolute;
  180.   top: 40px;
  181.   left: 20px;
  182.   animation:hair-anim 0.1s 0.8s 1 linear;
  183.   animation-fill-mode: forwards;
  184.   -webkit-animation:hair-anim 0.1s 0.8s 1 linear;
  185.   -webkit-animation-fill-mode: forwards;
  186.   z-index: 3;
  187. }
  188. .nose{
  189.   width: 10px;
  190.   height: 35px;
  191.   opacity: 1;
  192.   background: #FFE4BE;
  193.   border-top-left-radius: 20px;
  194.   position: absolute;
  195.   left: 60%;
  196.   top: 80px;
  197.   margin-left:-20px;
  198.   animation:shadow-anim 0.7s 3s 1 ease;
  199.   animation-fill-mode: forwards;
  200.   -webkit-animation:shadow-anim 0.7s 3s 1 ease;
  201.   -webkit-animation-fill-mode: forwards;
  202.   opacity: 0;
  203.   z-index: 5;
  204. }
  205. .ear{
  206.   width: 24px;
  207.   height: 35px;
  208.   background: #FFE4BE;
  209.   border-radius: 12px;
  210.   position: absolute;
  211.   top: 116px;
  212.   z-index:3;
  213.   animation:grow 0.7s 1.3s 1 ease;
  214.   animation-fill-mode: forwards;
  215.   -webkit-animation:grow 0.7s 1.3s 1 ease;
  216.   -webkit-animation-fill-mode: forwards;
  217.   -webkit-transform: scale(0);
  218.   transform: scale(0);
  219. }
  220. .mouth{
  221.   width: 56px;
  222.   height: 23px;
  223.   border-radius: 0 0 33px 33px;
  224.   background: white;
  225.   position: absolute;
  226.   top: 130px;
  227.   left: 55%;
  228.   margin-left: -33px;
  229.   animation:grow 0.7s 2.6s 1 ease;
  230.   animation-fill-mode: forwards;
  231.   -webkit-animation:grow 0.7s 2.6s 1 ease;
  232.   -webkit-animation-fill-mode: forwards;
  233.   -webkit-transform: scale(0);
  234.   transform: scale(0);
  235. }
  236. .ear#left{
  237.   left: -12px;
  238. }
  239. .ear#right{
  240.   right: -12px;
  241. }
  242. .eye-shadow{
  243.   width:40px;
  244.   height: 10px;
  245.   border-radius: 0 0 15px 15px;
  246.   background:rgba(149,36,0,0);
  247.   position: absolute;
  248.   top: 70px;
  249.   animation:grow 0.7s 2s 1 ease;
  250.   animation-fill-mode: forwards;
  251.   -webkit-animation:grow 0.7s 2s 1 ease;
  252.   -webkit-animation-fill-mode: forwards;
  253.   -webkit-transform: scale(0);
  254.   transform: scale(0);
  255. }
  256. .eye-shadow#left{
  257.   left:0% ;
  258.   z-index: 0;
  259. }
  260. .eye-shadow#right{
  261.     right:10% ;

  262. }
  263. .eyebrow{
  264.   width: 40px;
  265.   height: 2px;
  266.   background: #D8C078;
  267.   position: absolute;
  268.   top: -35px;
  269.   left: 50%;
  270.   margin-left: -20px;
  271.   opacity: 0;
  272.   -webkit-backface-visibility: hidden;
  273. }
  274. .eye-shadow#left .eyebrow{
  275.   animation:eyebrow-anim-left 0.7s 2.2s 1 ease;
  276.   animation-fill-mode: forwards;
  277.   -webkit-animation:eyebrow-anim-left 0.7s 2.2s 1 ease;
  278.   -webkit-animation-fill-mode: forwards;
  279. }
  280. .eye-shadow#right .eyebrow{
  281.   animation:eyebrow-anim-right 0.7s 2.2s 1 ease, eyebrow-raise 2s 6.6s infinite alternate ease-in-out;
  282.   animation-fill-mode: forwards;
  283.   -webkit-animation:eyebrow-anim-right 0.7s 2.2s 1 ease, eyebrow-raise 2s 6.6s infinite alternate ease-in-out;
  284.   -webkit-animation-fill-mode: forwards;
  285. }
  286. .eye-one{overflow:hidden;
  287.   width: 40px;
  288.   height: 20px;
  289.   border-radius: 100%;
  290.   background: white;
  291.   position: relative;
  292.   top: -18px;
  293.   padding:1px;

  294.   animation:grow 0.7s 2.2s 1 ease, eye-blink 4s 4.4s infinite linear;
  295.   animation-fill-mode: forwards;
  296.   -webkit-animation:grow 0.7s 2.2s 1 ease, eye-blink 4s 4.4s infinite linear;
  297.   -webkit-animation-fill-mode: forwards;
  298.   -webkit-transform: scale(0);
  299.   transform: scale(0);
  300.   -webkit-transform-origin: bottom;
  301.   transform-origin: bottom;

  302. }
  303. .eye-two{overflow:hidden;
  304.   width: 40px;
  305.   height: 20px;
  306.   border-radius: 100%;
  307.   background: white;
  308.   position: relative;
  309.   top: -18px;
  310.   padding:1px;

  311.   animation:grow 0.7s 2.2s 1 ease, eye-blink 4s 4.4s infinite linear;
  312.   animation-fill-mode: forwards;
  313.   -webkit-animation:grow 0.7s 2.2s 1 ease, eye-blink 4s 4.4s infinite linear;
  314.   -webkit-animation-fill-mode: forwards;
  315.   -webkit-transform: scale(0);
  316.   transform: scale(0);
  317.   -webkit-transform-origin: bottom;
  318.   transform-origin: bottom;

  319. }
  320. .iris{
  321.   width: 20px;
  322.   height: 20px;
  323.   border-radius: 100%;
  324.   background: skyblue;
  325.   border:1px solid rgba(0,0,0,.2);
  326. }
  327. .shadow-wrapper{
  328.   width: 98px;
  329.   height: 260px;
  330.   position: absolute;
  331.   left: -20px;
  332.   bottom: -84px;
  333.   overflow: hidden;
  334. }
  335. .shadow{
  336.   width: 98px;
  337.   height: 190px;
  338.   border-radius: 20%;
  339.   background: rgba(149,36,0,0.05);
  340.   position: absolute;
  341.   z-index: 4;
  342.   opacity: 0;
  343.   animation:shadow-anim 1s 2.8s 1 ease;
  344.   animation-fill-mode: forwards;
  345.   -webkit-animation:shadow-anim 1s 2.8s 1 ease;
  346.   -webkit-animation-fill-mode: forwards;
  347. }
  348. .triangle-light{
  349.   width: 400px;
  350.   height: 600px;
  351.   background: #FFFFFF;
  352.   opacity: 0.2;
  353.   position: absolute;
  354.   right: -65%;
  355.   animation: triangle-light-anim 1s 2.8s 1 ease;
  356.   animation-fill-mode: forwards;
  357.   -webkit-animation: triangle-light-anim 1s 2.8s 1 ease;
  358.   -webkit-animation-fill-mode: forwards;
  359.   -webkit-transform: translate(200px,0px);
  360.   transform: translate(200px,0px);
  361. }
  362. .triangle-dark{
  363.   width: 400px;
  364.   height: 600px;
  365.   background: #000000;
  366.   opacity: 0.2;
  367.   position: absolute;
  368.   left: -60%;
  369.   z-index:-1;
  370.   top: 30%;
  371.   animation: triangle-dark-anim 1s 3s 1 ease;
  372.   animation-fill-mode: forwards;
  373.   -webkit-animation: triangle-dark-anim 1s 3s 1 ease;
  374.   -webkit-animation-fill-mode: forwards;
  375.   -webkit-transform: translate(-200px,0px);
  376.   transform: translate(-200px,0px);
  377. }
  378. .music-note{
  379.   position: absolute;
  380.   font-size: 150px;
  381.   color: #FCB040;
  382.   width: 1px;
  383.   left: 50%;
  384.   opacity: 0;
  385. }
  386. .music-note#one{
  387.   margin-left: -250px;
  388.   top: 50%;
  389.   animation: note-anim 2s 3.5s infinite ease;
  390.   animation-fill-mode: forwards;
  391.   -webkit-animation: note-anim 2s 3.5s infinite ease;
  392.   -webkit-animation-fill-mode: forwards;
  393. }
  394. .music-note#two{
  395.   margin-left: 150px;
  396.   top: 30%;
  397.   animation: note-anim 2s 4.3s infinite ease;
  398.   animation-fill-mode: forwards;
  399.   -webkit-animation: note-anim 2s 4.3s infinite ease;
  400.   -webkit-animation-fill-mode: forwards;
  401. }
  402. .shirt-text{
  403.   z-index:3;
  404.   font-family: 'Helvetica Neue', sans-serif;
  405.   font-weight: 100;
  406.   color: white;
  407.   position: relative;
  408.   top: -300px;
  409.   font-size:20px;
  410.   display: inline-block;
  411.   -webkit-text-stroke: 2px;
  412.   -webkit-transform: translate(0px,100px);
  413.   transform: translate(0px,100px);
  414.   animation-fill-mode: forwards !important;
  415.   -webkit-animation-fill-mode: forwards !important;
  416. }
  417. .shirt-text:nth-of-type(1){
  418.   animation: text-anim 0.7s 3s 1 ease;
  419.   -webkit-animation: text-anim 0.7s 3s 1 ease;
  420. }
  421. .shirt-text:nth-of-type(2){
  422.   animation: text-anim 0.7s 3.1s 1 ease;
  423.   -webkit-animation: text-anim 0.7s 3.1s 1 ease;
  424. }
  425. .shirt-text:nth-of-type(3){
  426.     color: red;

  427.   animation: text-anim 0.7s 3.2s 1 ease;
  428.   -webkit-animation: text-anim 0.7s 3.2s 1 ease;
  429. }
  430. .shirt-text:nth-of-type(4){
  431.   animation: text-anim 0.7s 3.3s 1 ease;
  432.   -webkit-animation: text-anim 0.7s 3.3s 1 ease;
  433. }
  434. .shirt-text:nth-of-type(5){
  435.   animation: text-anim 0.7s 3.4s 1 ease;
  436.   -webkit-animation: text-anim 0.7s 3.4s 1 ease;
  437. }
  438. .shirt-text:nth-of-type(6){
  439.   animation: text-anim 0.7s 3.4s 1 ease;
  440.   -webkit-animation: text-anim 0.7s 3.4s 1 ease;
  441. }
  442. .shirt-text:nth-of-type(7){
  443.   animation: text-anim 0.7s 3.4s 1 ease;
  444.   -webkit-animation: text-anim 0.7s 3.4s 1 ease;
  445. }
  446. .shirt-text:nth-of-type(8){
  447.   animation: text-anim 0.7s 3.4s 1 ease;
  448.   -webkit-animation: text-anim 0.7s 3.4s 1 ease;
  449. }

  450. .arms{
  451.   position:relative;
  452.     width:200px;
  453.         height:50px;
  454.   z-index:0;
  455. margin: 0 auto;
  456.   border-radius:20%;
  457.   background: #ff5200;
  458.   top: -200px;
  459.   animation:body-enter 0.7s 0.2s 1 ease;
  460.   animation-fill-mode: forwards;
  461.   -webkit-animation:body-enter 0.7s 0.2s 1 ease;
  462.   -webkit-animation-fill-mode: forwards;

  463. }  
  464. @keyframes grow
  465. {
  466. 0% {  
  467.   -webkit-transform: scale(0) translateZ(0);
  468.   transform: scale(0) translateZ(0);
  469. }
  470. 60% {  
  471.   -webkit-transform: scale(1.15) translateZ(0);
  472.   transform: scale(1.15) translateZ(0);
  473. }
  474. 80% {  
  475.   -webkit-transform: scale(0.95) translateZ(0);
  476.   transform: scale(0.95) translateZ(0);
  477. }
  478. 100% {
  479.   -webkit-transform: scale(1) translateZ(0);
  480.   transform: scale(1) translateZ(0);
  481. }
  482. }

  483. @-webkit-keyframes grow /* Safari and Chrome */
  484. {
  485. 0% {  
  486.   -webkit-transform: scale(0) translateZ(0);
  487.   transform: scale(0) translateZ(0);
  488. }
  489. 60% {  
  490.   -webkit-transform: scale(1.15) translateZ(0);
  491.   transform: scale(1.15) translateZ(0);
  492. }
  493. 80% {  
  494.   -webkit-transform: scale(0.95) translateZ(0);
  495.   transform: scale(0.95) translateZ(0);
  496. }
  497. 100% {
  498.   -webkit-transform: scale(1) translateZ(0);
  499.   transform: scale(1) translateZ(0);
  500. }
  501. }

  502. @keyframes body-enter
  503. {
  504. 0% {
  505.   -webkit-transform: translateY(200px) translateZ(0);
  506.   transform: translateY(200px) translateZ(0);
  507. }
  508. 60% {  
  509.   -webkit-transform: translateY(-20px) translateZ(0);
  510.   transform: translateY(-20px) translateZ(0);
  511. }
  512. 80% {  
  513.   -webkit-transform: translateY(30px) translateZ(0);
  514.   transform: translateY(30px) translateZ(0);
  515. }
  516. 100% {  
  517.   -webkit-transform: translateY(0px) translateZ(0);
  518.   transform: translateY(0px) translateZ(0);
  519. }
  520. }

  521. @-webkit-keyframes body-enter /* Safari and Chrome */
  522. {
  523. 0% {
  524.   -webkit-transform: translateY(200px) translateZ(0);
  525.   transform: translateY(200px) translateZ(0);
  526. }
  527. 60% {  
  528.   -webkit-transform: translateY(-20px) translateZ(0);
  529.   transform: translateY(-20px) translateZ(0);
  530. }
  531. 80% {  
  532.   -webkit-transform: translateY(30px) translateZ(0);
  533.   transform: translateY(30px) translateZ(0);
  534. }
  535. 100% {  
  536.   -webkit-transform: translateY(0px) translateZ(0);
  537.   transform: translateY(0px) translateZ(0);
  538. }
  539. }
  540. @keyframes hairback-anim
  541. {
  542. 0% {  
  543.   height:0px;
  544.   -webkit-transform: translateY(137px) translateZ(0);
  545.   transform: translateY(137px) translateZ(0);
  546.     z-index:0;
  547. }
  548. 100% {
  549.   height: 237px;
  550.   -webkit-transform: translateY(0px) translateZ(0);
  551.   transform: translateY(0px) translateZ(0);
  552.   z-index:0;
  553. }
  554. }

  555. @-webkit-keyframes hairback-anim /* Safari and Chrome */
  556. {
  557. 0% {  
  558.   height:0px;
  559.   -webkit-transform: translateY(137px) translateZ(0);
  560.   transform: translateY(137px) translateZ(0);
  561. }
  562. 100% {
  563.   height: 237px;
  564.   -webkit-transform: translateY(0px) translateZ(0);
  565.   transform: translateY(0px) translateZ(0);
  566. }
  567. }
  568. @keyframes hair-anim
  569. {
  570. 0% {  
  571.   height:0px;
  572.   -webkit-transform: translateY(137px) translateZ(0);
  573.   transform: translateY(137px) translateZ(0);
  574. }
  575. 100% {
  576.   height: 137px;
  577.   -webkit-transform: translateY(0px) translateZ(0);
  578.   transform: translateY(0px) translateZ(0);
  579. }
  580. }

  581. @-webkit-keyframes hair-anim /* Safari and Chrome */
  582. {
  583. 0% {  
  584.   height:0px;
  585.   -webkit-transform: translateY(137px) translateZ(0);
  586.   transform: translateY(137px) translateZ(0);
  587. }
  588. 100% {
  589.   height: 137px;
  590.   -webkit-transform: translateY(0px) translateZ(0);
  591.   transform: translateY(0px) translateZ(0);
  592. }
  593. }

  594. @keyframes sideburn-anim
  595. {
  596. 0% {
  597.   opacity: 0;
  598.   -webkit-transform: translateY(-25px) translateZ(0);
  599.   transform: translateY(-25px) translateZ(0);
  600. }
  601. 100% {
  602.   opacity: 1;
  603.   -webkit-transform: translateY(0px) translateZ(0);
  604.   transform: translateY(0px) translateZ(0);
  605. }
  606. }

  607. @-webkit-keyframes sideburn-anim /* Safari and Chrome */
  608. {
  609. 0% {
  610.   opacity: 0;
  611.   -webkit-transform: translateY(-25px) translateZ(0);
  612.   transform: translateY(-25px) translateZ(0);
  613. }
  614. 100% {
  615.   opacity: 1;
  616.   -webkit-transform: translateY(0px) translateZ(0);
  617.   transform: translateY(0px) translateZ(0);
  618. }
  619. }

  620. @keyframes hair-top-anim
  621. {
  622. 0% {
  623.   opacity: 0;
  624.   -webkit-transform:translate(-64px, 30px) translateZ(0);
  625.   transform:translate(-64px, 30px) translateZ(0);
  626. }
  627. 60% {  
  628.   opacity: 1;
  629.   -webkit-transform: rotate(0deg) translate(-64px, 30px) translateZ(0);
  630.   transform: rotate(0deg) translate(-64px, 30px) translateZ(0);
  631. }
  632. 80% {  
  633.   opacity: 1;
  634.   -webkit-transform: rotate(10deg) translate(-64px, -5px) translateZ(0);
  635.   transform: rotate(10deg) translate(-64px, -5px) translateZ(0);
  636. }
  637. 100% {  
  638.   opacity: 1;
  639.   -webkit-transform: rotate(0deg) translate(-64px, 0px) translateZ(0);
  640.   transform: rotate(0deg) translate(-64px, 0px) translateZ(0);
  641. }
  642. }

  643. @-webkit-keyframes hair-top-anim /* Safari and Chrome */
  644. {
  645. 0% {
  646.   opacity: 0;
  647.   -webkit-transform:translate(-64px, 30px) translateZ(0);
  648.   transform:translate(-64px, 30px) translateZ(0);
  649. }
  650. 60% {  
  651.   opacity: 1;
  652.   -webkit-transform: rotate(0deg) translate(-64px, 30px) translateZ(0);
  653.   transform: rotate(0deg) translate(-64px, 30px) translateZ(0);
  654. }
  655. 80% {  
  656.   opacity: 1;
  657.   -webkit-transform: rotate(10deg) translate(-64px, -5px) translateZ(0);
  658.   transform: rotate(10deg) translate(-64px, -5px) translateZ(0);
  659. }
  660. 100% {  
  661.   opacity: 1;
  662.   -webkit-transform: rotate(0deg) translate(-64px, 0px) translateZ(0);
  663.   transform: rotate(0deg) translate(-64px, 0px) translateZ(0);
  664. }
  665. }

  666. @keyframes hair-bottom-anim
  667. {
  668. 0% {
  669.   opacity: 0;
  670.   -webkit-transform:translate(-27px, -40px) translateZ(0);
  671.   transform:translate(-27px, -40px) translateZ(0);
  672. }
  673. 60% {  
  674.   opacity: 1;
  675.   -webkit-transform: rotate(0deg) translate(-27px, -40px) translateZ(0);
  676.   transform: rotate(0deg) translate(-27px, -40px) translateZ(0);
  677. }
  678. 80% {  
  679.   opacity: 1;
  680.   -webkit-transform: rotate(10deg) translate(-27px, 5px) translateZ(0);
  681.   transform: rotate(10deg) translate(-27px, 5px) translateZ(0);
  682. }
  683. 100% {  
  684.   opacity: 1;
  685.   -webkit-transform: rotate(0deg) translate(-27px, 0px) translateZ(0);
  686.   transform: rotate(0deg) translate(-27px, 0px) translateZ(0);
  687. }
  688. }

  689. @-webkit-keyframes hair-bottom-anim /* Safari and Chrome */
  690. {
  691. 0% {
  692.   opacity: 0;
  693.   -webkit-transform:translate(-27px, -40px) translateZ(0);
  694.   transform:translate(-27px, -40px) translateZ(0);
  695. }
  696. 60% {  
  697.   opacity: 1;
  698.   -webkit-transform: rotate(0deg) translate(-27px, -40px) translateZ(0);
  699.   transform: rotate(0deg) translate(-27px, -40px) translateZ(0);
  700. }
  701. 80% {  
  702.   opacity: 1;
  703.   -webkit-transform: rotate(10deg) translate(-27px, 5px) translateZ(0);
  704.   transform: rotate(10deg) translate(-27px, 5px) translateZ(0);
  705. }
  706. 100% {  
  707.   opacity: 1;
  708.   -webkit-transform: rotate(0deg) translate(-27px, 0px) translateZ(0);
  709.   transform: rotate(0deg) translate(-27px, 0px) translateZ(0);
  710. }
  711. }

  712. @keyframes music-move
  713. {
  714. 0% {
  715.   -webkit-transform: rotate(0deg) translateZ(0);
  716.   transform: rotate(0deg) translateZ(0);
  717. }
  718. 33% {  
  719.   -webkit-transform: rotate(-5deg) translateZ(0);
  720.   transform: rotate(-5deg) translateZ(0);
  721. }
  722. 66% {  
  723.   -webkit-transform: rotate(5deg) translateZ(0);
  724.   transform: rotate(5deg) translateZ(0);
  725. }
  726. 100% {  
  727.   -webkit-transform: rotate(0deg) translateZ(0);
  728.   transform: rotate(0deg) translateZ(0);
  729. }
  730. }

  731. @-webkit-keyframes music-move /* Safari and Chrome */
  732. {
  733. 0% {
  734.   -webkit-transform: rotate(0deg) translateZ(0);
  735.   transform: rotate(0deg) translateZ(0);
  736. }
  737. 33% {  
  738.   -webkit-transform: rotate(-5deg) translateZ(0);
  739.   transform: rotate(-5deg) translateZ(0);
  740. }
  741. 66% {  
  742.   -webkit-transform: rotate(5deg) translateZ(0);
  743.   transform: rotate(5deg) translateZ(0);
  744. }
  745. 100% {  
  746.   -webkit-transform: rotate(0deg) translateZ(0);
  747.   transform: rotate(0deg) translateZ(0);
  748. }
  749. }

  750. @keyframes eyebrow-anim-right
  751. {
  752. 0% {
  753.   opacity: 0;
  754.   -webkit-transform: translateY(-25px) translateZ(0);
  755.   transform: translateY(-25px) translateZ(0);
  756. }
  757. 70% {
  758.   opacity: 1;
  759.   -webkit-transform: translateY(5px) translateZ(0);
  760.   transform: translateY(5px) translateZ(0);
  761. }  
  762. 100% {
  763.   opacity: 1;
  764.   -webkit-transform: rotate(9deg) translateY(0px) translateZ(0);
  765.   transform: rotate(9deg) translateY(0px) translateZ(0);
  766. }
  767. }

  768. @-webkit-keyframes eyebrow-anim-right /* Safari and Chrome */
  769. {
  770. 0% {
  771.   opacity: 0;
  772.   -webkit-transform: translateY(-25px) translateZ(0);
  773.   transform: translateY(-25px) translateZ(0);
  774. }
  775. 70% {
  776.   opacity: 1;
  777.   -webkit-transform: translateY(5px) translateZ(0);
  778.   transform: translateY(5px) translateZ(0);
  779. }
  780. 100% {
  781.   opacity: 1;
  782.   -webkit-transform: rotate(9deg) translateY(0px) translateZ(0);
  783.   transform: rotate(9deg) translateY(0px) translateZ(0);
  784. }
  785. }
  786. @keyframes eyebrow-raise
  787. {
  788. 0% {
  789.   top:-35px;
  790. }
  791. 80% {
  792.   top:-35px;

  793. }
  794. 100% {
  795.   top:-45px;
  796. }
  797. }

  798. @-webkit-keyframes eyebrow-raise /* Safari and Chrome */
  799. {
  800. 0% {
  801.   top:-35px;
  802. }
  803. 80% {
  804.   top:-35px;

  805. }
  806. 100% {
  807. 一款jquery和css3实现的卡通人物动画特效

    2. 一款jquery和css3实现的卡通人物动画特效

    3. Cufon, jQuery和CSS3实现的超强飞出菜单

    4. Cufon, jQuery和CSS3实现的超强飞出菜单

    5. 一款基于jquery和css3的头像恶搞特效

    6. 使用jQuery和CSS3实现一个数字时钟

    7. 使用jQuery和CSS3实现一个数字时钟

    8. 分享Jquery+CSS3实现的3D下拉菜单特效

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

    10. 一款基于css3和jquery实现的动画弹出层

    本文来源:https://www.51html5.com/a1395.html

    点击展开全部

﹝一款jquery和css3实现的卡通人物动画特效﹞相关内容

「一款jquery和css3实现的卡通人物动画特效」相关专题