使用CSS3各个属性实现带有音乐小人的动画，完全不使用JS代码：

注：chrome浏览器效果最佳，最终效果静态图：

HTML代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8";>
  5.     <title>练习一个小人的动画</title>
  6.     <link rel="stylesheet" href="/CSS3/css/people.css" />
  7. </head>
  8.  
  9. <body>
  10.     <div class="music1">
  11.         <audio src="/CSS3/theme_8.mp3" autoplay loop/>
  12.     </div>
  13.  
  14.     <!--整体的div布局-->
  15.     <div class="warp">
  16.         <div class="border_circle" id="one"></div>
  17.         <div class="border_circle" id="two"></div>
  18.         <!--背景圆圈-->
  19.         <div class="backgroud_circle">
  20.             <div class="tight-light"></div>
  21.             <span class="shirt-text">I</span>
  22.             <span class="shirt-text">♥</span>
  23.             <span class="shirt-text">Y</span>
  24.             <span class="shirt-text">O</span>
  25.             <span class="shirt-text">U</span>
  26.             <div class="tight-dark"></div>
  27.             <!--身体-->
  28.             <div class="body"></div>
  29.         </div>
  30.  
  31.         <!--头部-->
  32.         <div class="head">
  33.             <!--耳朵-->
  34.             <div class="ear" id="left"></div>
  35.             <div class="ear" id="right"></div>
  36.             <!--头发-->
  37.             <div class="hair-main">
  38.                 <div class="sideburn" id="left"></div>
  39.                 <div class="sideburn" id="right"></div>
  40.                 <div class="hair-top"></div>
  41.             </div>
  42.             <!--脸-->
  43.             <div class="face">
  44.                 <div class="hair-bottom"></div>
  45.                 <div class="nose"></div>
  46.                 <!--形成鼻子的阴影-->
  47.                 <div class="shadow-main">
  48.                     <div class="shadow"></div>
  49.                 </div>
  50.                 <!--左眼-->
  51.                 <div class="eye-shadow" id="left">
  52.                     <div class="eyebrow" id="left"></div>
  53.                     <div class="eye"></div>
  54.                 </div>
  55.                 <!--右眼-->
  56.                 <div class="eye-shadow" id="right">
  57.                     <div class="eyebrow" id="right"></div>
  58.                     <div class="eye"></div>
  59.                 </div>
  60.                 <!--嘴巴-->
  61.                 <div class="mouse"></div>
  62.             </div>
  63.         </div>
  64.  
  65.         <!--音符-->
  66.         <span class="music" id="one">♫</span>
  67.         <span class="music" id="two">♪</span>
  68.     </div>
  69. </body>
  70. </html>

CSS代码如下：

  1. /* CSS Document */
  2.  
  3. body,html{
  4.     width:100%;
  5.     height:100%;
  6.     margin:;
  7.     display:table;
  8.     text-align:center;
  9. }
  10. .music1
  11. {
  12.     display:none;
  13. }
  14.  
  15. .warp{
  16.     margin-top:100px;
  17.     vertical-align:middle;
  18.     position:relative;
  19. }
  20.  
  21. .backgroud_circle{
  22.     width:400px;
  23.     height:400px;
  24.     border-radius:100%;
  25.     background:#6699FF;
  26.     margin:0 auto;
  27.     overflow:hidden;
  28.     -webkit-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
  29.     -moz-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
  30.       -o-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
  31.       -ms-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
  32.     /*执行动画*/
  33.     animation:grow 0.7s ease;
  34.     -webkit-animation:grow 0.7s ease;
  35.     transform-origin:center;
  36. }
  37.  
  38. /*身体body*/
  39. .body{
  40.     width:285px;
  41.     height:400px;
  42.     margin:0 auto;
  43.     background:#333333;
  44.     position:relative;
  45.     top:100px;
  46.     border-radius:100px;
  47.     /*执行动画*/
  48.     -webkit-animation:body-enter 0.7s 0.2s 1 ease;
  49.     animation:body-enter 0.7s 0.2s 1 ease;
  50.     /*-webkit-animation-fill-mode:forwards;
  51.     animation-fill-mode:forwards;*/
  52. }
  53.  
  54. /*头部head*/
  55. .head{
  56.     width:196px;
  57.     height:260px;
  58.     border-radius:50px;
  59.     background:#ffe4be;
  60.     position:absolute;
  61.     top:50%;
  62.     left:50%;
  63.     margin-top:-210px;
  64.     margin-left:-98px;
  65.     /*动画执行*/
  66.     animation:grow 0.7s 0.5s ease;
  67.     -webkit-animation:grow 0.7s 0.5s ease;
  68.     transform-origin:bottom;
  69. }
  70.  
  71. /*头发*/
  72. .hair-main
  73. {
  74.     width:220px;
  75.     height:0px;
  76.     background:#FF9966;
  77.     border-radius:54px 54px 0px 0px;
  78.     animation:hair-main 0.7s 0.9s ease;
  79.     -webkit-animation:hair-main 0.7s 0.9s ease;
  80.     animation-fill-mode:forwards;
  81.     -webkit-animation-fill-mode:forwards;
  82.     position:relative;
  83.     margin-left:-12px;
  84.     margin-top:-10px;
  85.     z-index:;
  86. }
  87.  
  88. /*鬓角*/
  89. .sideburn
  90. {
  91.     width:8px;
  92.     height:25px;
  93.     background:#FF9966;
  94.     opacity:;
  95.     bottom:-25px;
  96.     position:absolute;
  97.     animation:sideburn-main 0.7s 1s ease;
  98.     -webkit-animation:sideburn-main 0.7s 1s ease;
  99.     animation-fill-mode:forwards;
  100.     -webkit-animation-fill-mode:forwards;
  101. }
  102. .sideburn#left
  103. {
  104.     left:12px;
  105. }
  106. .sideburn#right
  107. {
  108.     right:12px;
  109. }
  110.  
  111. /*耳朵*/
  112. .ear
  113. {
  114.     width:24px;
  115.     height:35px;
  116.     position:absolute;
  117.     background:#ffe4be;
  118.     top:116px;
  119.     border-radius:12px;
  120.     animation:grow 0.7s 1.3s ease;
  121.     -webkit-animation:grow 0.7s 1.3s ease;
  122.     animation-fill-mode:forwards;
  123.     -webkit-animation-fill-mode:forwards;
  124.     transform:scale(0);
  125.     -webkit-transform:scale(0);
  126. }
  127. .ear#left
  128. {
  129.     left:-12px;
  130. }
  131. .ear#right
  132. {
  133.     right:-12px;
  134. }
  135.  
  136. /*脸部*/
  137. .face
  138. {
  139.     width:180px;
  140.     height:0px;
  141.     border-radius:48px;
  142.     background:#ffe4be;
  143.     position:absolute;
  144.     top:40px;
  145.     left:8px;
  146.     animation:hair-main 0.7s 0.5s linear;
  147.     -webkit-animation:hair-main 0.7s 0.5s linear;
  148.     animation-fill-mode:forwards;
  149.     -webkit-animation-fill-mode:forwards;
  150.     z-index:;
  151. }
  152.  
  153. /*鼻子*/
  154. .nose
  155. {
  156.     width:20px;
  157.     height:45px;
  158.     opacity:;
  159.     border-top-left-radius:20px;
  160.     background:#ffe4be;
  161.     position:absolute;
  162.     top:80px;
  163.     left:50%;
  164.     margin-left:-20px;
  165.     animation:shadow-main 0.7s 3s ease;
  166.       animation-fill-mode: forwards;
  167.       -webkit-animation:shadow-main 0.7s 3s ease;
  168.       -webkit-animation-fill-mode: forwards;
  169.       opacity:;
  170.      z-index:;
  171. }
  172.  
  173. /*形成鼻子的阴影*/
  174. .shadow-main
  175. {
  176.     width:98px;
  177.     height:260px;
  178.     position:absolute;
  179.     bottom:-84px;
  180.     left:-8px;
  181.     z-index:;
  182.     overflow:hidden;
  183. }
  184. .shadow
  185. {
  186.     width:98px;
  187.     height:260px;
  188.     border-radius:50px;
  189.     background:rgba(149,36,0,0.1);
  190.     position:absolute;
  191.     opacity:;
  192.     z-index:;
  193.     animation:shadow-main 1s 2.8s ease;
  194.     -webkit-animation:shadow-main 1s 2.8s ease;
  195.     animation-fill-mode:forwards;
  196.     -webkit-animation-fill-mode:forwards;
  197. }
  198.  
  199. /*眼睛阴影*/
  200. .eye-shadow
  201. {
  202.     width:30px;
  203.     height:15px;
  204.     border-radius:0 0 15px 15px;
  205.     background:rgba(149,36,0,0.1);
  206.     position:absolute;
  207.     top:70px;
  208.     animation:grow 0.7s 2s ease;
  209.     -webkit-animation:grow 0.7s 2s ease;
  210.     animation-fill-mode:forwards;
  211.     -webkit-animation-fill-mode:forwards;
  212.     transform:scale(0);
  213.     -webkit-transform:scale(0);
  214. }
  215. .eye-shadow#left
  216. {
  217.     left:35px;
  218.     z-index:;
  219. }
  220. .eye-shadow#right
  221. {
  222.     right:35px;
  223. }
  224.  
  225. /*眼眉*/
  226. .eyebrow
  227. {
  228.     width:40px;
  229.     height:10px;
  230.     background:#FF9966;
  231.     position:absolute;
  232.     top:-35px;
  233.     left:50%;
  234.     opacity:;
  235.     margin-left:-20px;
  236.     -webkit-backface-visibility:hidden;/*设定元素的背面是否可见*/
  237. }
  238. .eyebrow#left
  239. {
  240.     animation:eyebrow-left 0.7s 2.2s ease;
  241.     -webkit-animation:eyebrow-left 0.7s 2.2s ease;
  242.     animation-fill-mode:forwards;
  243.     -webkit-animation-fill-mode:forwards;
  244. }
  245. .eyebrow#right
  246. {
  247.     animation:eyebrow-right 0.7s 2.2s ease, eyebrow-right-raise 2s 6.6s infinite alternate ease-in-out;
  248.     -webkit-animation:eyebrow-right 0.7s 2.2s ease, eyebrow-right-raise 2s 6.6s infinite alternate ease-in-out;
  249.     animation-fill-mode:forwards;
  250.     -webkit-animation-fill-mode:forwards;
  251. }
  252.  
  253. /*两只蓝色眼睛*/
  254. .eye
  255. {
  256.     width:20px;
  257.     height:28px;
  258.     border-radius:10px;
  259.     background:#334C68;
  260.     position:absolute;
  261.     top:-18px;
  262.     left:50%;
  263.     margin-left:-10px;
  264.     animation:grow 0.7s 2.2s ease;
  265.     -webkit-animation:grow 0.7s 2.2s ease;
  266.     animation-fill-mode:forwards;
  267.     -webkit-animation-fill-mode:forwards;
  268.     transform:scale(0);
  269.     -webkit-transform:scale(0);
  270.     transform-origin:bottom;
  271.     -webkit-transform-origin:bottom;
  272. }
  273.  
  274. /*嘴巴*/
  275. .mouse
  276. {
  277.     width:66px;
  278.     height:33px;
  279.     background:#FFFFFF;
  280.     border-radius:0 0 33px 33px;
  281.     position:absolute;
  282.     left:50%;
  283.     top:150px;
  284.     margin-left:-33px;
  285.     animation:grow 0.7s 2.6s ease;
  286.     -webkit-animation:grow 0.7s 2.6s ease;
  287.     animation-fill-mode:forwards;
  288.     -webkit-animation-fill-mode:forwards;
  289.     transform:scale(0);
  290.     -webkit-transform:scale(0);
  291. }
  292.  
  293. /*背景高亮light阴影*/
  294. .tight-light
  295. {
  296.     width:400px;
  297.     height:600px;
  298.     background:#ffffff;
  299.     opacity:;
  300.     position:absolute;
  301.     right:15%;
  302.     animation:tight-light 1s 2.8s ease;
  303.     -webkit-animation:tight-light 1s 2.8s ease;
  304.     animation-fill-mode:forwards;
  305.     -webkit-animation-fill-mode:forwards;
  306.     transform:translate(200px,0px);
  307.     -webkit-transform:translate(200px,0px);
  308. }
  309.  
  310. /*背景高亮dark阴影*/
  311. .tight-dark
  312. {
  313.     width:400px;
  314.     height:600px;
  315.     background:#000000;
  316.     opacity:;
  317.     position:absolute;
  318.     left:10%;
  319.     top:35px;
  320.     animation:tight-dark 1s 2.8s ease;
  321.     -webkit-animation:tight-dark 1s 2.8s ease;
  322.     animation-fill-mode:forwards;
  323.     -webkit-animation-fill-mode:forwards;
  324.     transform:translate(-200px,0px);
  325.     -webkit-transform:translate(-200px,0px);
  326.     z-index:;
  327. }
  328.  
  329. /*外边黄色圈*/
  330. .border_circle
  331. {
  332.     width:399px;
  333.     height:399px;
  334.     border-radius:50%;
  335.     border:10px solid #ff8345;
  336.     position:absolute;
  337.     top:50%;
  338.     left:50%;
  339.     margin-left:-220px;
  340.     margin-top:-220px;
  341.     transform:scale(0);
  342.     -webkit-transform:scale(0);
  343.     transform-origin:center;
  344.     -webkit-transform-origin:center;
  345. }
  346. /*外边黄色圈one*/
  347. .border_circle#one
  348. {
  349.     animation:border_circle 1s 3.1s ease;
  350.     -webkit-animation:border_circle 1s 3.1s ease;
  351.     animation-fill-mode:forwards;
  352.     -webkit-animation-fill-mode:forwards;
  353. }
  354. /*外边黄色圈two*/
  355. .border_circle#two
  356. {
  357.     animation:border_circle 1s 3.3s ease;
  358.     -webkit-animation:border_circle 1s 3.3s ease;
  359.     animation-fill-mode:forwards;
  360.     -webkit-animation-fill-mode:forwards;
  361. }
  362.  
  363. /*I YOU*/
  364. .backgroud_circle  .shirt-text
  365. {
  366.     font-family:"微软雅黑",sans-serif;
  367.     font-size:50px;
  368.     font-weight:;
  369.     color:#FFFFFF;
  370.     position:relative;
  371.     top:180px;
  372.     display:inline-block;
  373.     -webkit-text-stroke:2px;
  374.     text-stroke:2px;
  375.     opacity:;
  376.     -webkit-transform:translate(0px,100px);
  377.     transform:translate(0px,100px);
  378.     animation-fill-mode:forwards !important;
  379.     -webkit-animation-fill-mode:forwards !important;
  380.     z-index:;
  381. }
  382. .backgroud_circle .shirt-text:nth-of-type(1)
  383. {
  384.     animation:shirt-text 0.7s 3.3s ease;
  385.     -webkit-animation:shirt-text 0.7s 3.3s ease;
  386. }
  387. .backgroud_circle .shirt-text:nth-of-type(2)
  388. {
  389.     color:#FF0000;
  390.     animation:shirt-text 0.7s 3.4s ease, heart 2s 4s infinite ease-in-out;
  391.     -webkit-animation:shirt-text 0.7s 3.4s ease, heart 2s 4s infinite ease-in-out;
  392. }
  393. .backgroud_circle .shirt-text:nth-of-type(3)
  394. {
  395.     animation:shirt-text 0.7s 3.5s ease;
  396.     -webkit-animation:shirt-text 0.7s 3.5s ease;
  397. }
  398. .backgroud_circle .shirt-text:nth-of-type(4)
  399. {
  400.     animation:shirt-text 0.7s 3.6s ease;
  401.     -webkit-animation:shirt-text 0.7s 3.6s ease;
  402. }
  403. .backgroud_circle .shirt-text:nth-of-type(5)
  404. {
  405.     animation:shirt-text 0.7s 3.7s ease;
  406.     -webkit-animation:shirt-text 0.7s 3.7s ease;
  407. }
  408.  
  409. /*音符*/
  410. .music
  411. {
  412.     position: absolute;
  413.     font-size: 150px;
  414.     color: #FCB040;
  415.     width: 1px;
  416.     left: 50%;
  417.     opacity:;
  418. }
  419. .music#one
  420. {
  421.     margin-left:-250px;
  422.     top:50%;
  423.     animation: note 2s 3.5s infinite ease;
  424.     animation-fill-mode: forwards;
  425.     -webkit-animation: note 2s 3.5s infinite ease;
  426.     -webkit-animation-fill-mode: forwards;
  427. }
  428.  
  429. .music#two{
  430.   margin-left: 150px;
  431.   top: 30%;
  432.   animation: note 2s 4.3s infinite ease;
  433.   animation-fill-mode: forwards;
  434.   -webkit-animation: note 2s 4.3s infinite ease;
  435.   -webkit-animation-fill-mode: forwards;
  436. }
  437.  
  438. /*背景圆圈的动画事件：由中心向外扩张*/
  439. @-webkit-keyframes grow
  440. {
  441.     0%{ -webkit-transform:scale(0); transform:scale(0);}
  442.     60%{ -webkit-transform:scale(1.15); transform:scale(1.15);}
  443.     80%{ -webkit-transform:scale(0.95); transform:scale(0.95);}
  444.     100%{ -webkit-transform:scale(1); transform:scale(1);}
  445. }
  446. @keyframes grow
  447. {
  448.     0%{ -webkit-transform:scale(0); transform:scale(0);}
  449.     60%{ -webkit-transform:scale(1.15); transform:scale(1.15);}
  450.     80%{ -webkit-transform:scale(0.95); transform:scale(0.95);}
  451.     100%{ -webkit-transform:scale(1); transform:scale(1);}
  452. }
  453.  
  454. /*身体进入样式：由底部向上先变大再恢复正常*/
  455. @-webkit-keyframes body-enter
  456. {
  457.     0%{-webkit-transform:translateY(200px);}
  458.     60%{-webkit-transform:translateY(-20px);}
  459.     80%{-webkit-transform:translateY(30px);}
  460.     100%{-webkit-transform:translateY(0);}
  461. }
  462. @keyframes body-enter
  463. {
  464.     0%{-webkit-transform:translateY(200px);}
  465.     60%{-webkit-transform:translateY(-20px);}
  466.     80%{-webkit-transform:translateY(30px);}
  467.     100%{-webkit-transform:translateY(0);}
  468. }
  469.  
  470. /*头发动画：*/
  471. @-webkit-keyframes hair-main
  472. {
  473.     0%{height:0px; -webkit-transform:translateY(137px); transform:translateY(137px);}
  474.     100%{height:137px; -webkit-transform:translateY(0); transform:translateY(0);}
  475. }
  476. @keyframes hair-main
  477. {
  478.     0%{height:0px; -webkit-transform:translateY(137px); transform:translateY(137px);}
  479.     100%{height:137px; -webkit-transform:translateY(0); transform:translateY(0);}
  480. }
  481.  
  482. /*鬓角动画*/
  483. @-webkit-keyframes sideburn-main
  484. {
  485.     0%{opacity:; -webkit-transform:translateY(-25px); transform:translateY(-25px);}
  486.     100%{opacity:; -webkit-transform:translateY(0); transform:translateY(0);}
  487. }
  488. @keyframes sideburn-main
  489. {
  490.     0%{opacity:; -webkit-transform:translateY(-25px); transform:translateY(-25px);}
  491.     100%{opacity:; -webkit-transform:translateY(0); transform:translateY(0);}
  492. }
  493.  
  494. /*鼻子阴影动画：*/
  495. @-webkit-keyframes shadow-main
  496. {
  497.     0%{ opacity:; -webkit-transform:translate(98px,0px); transform:translate(98px,0px);}
  498.     50%{ opacity:;}
  499.     100%{ opacity:; -webkit-transform:translate(0px,0px); transform:translate(0px,0px);}
  500. }
  501. @keyframes shadow-main
  502. {
  503.     0%{ opacity:; -webkit-transform:translate(98px,0px); transform:translate(98px,0px);}
  504.     50%{ opacity:;}
  505.     100%{ opacity:; -webkit-transform:translate(0px,0px); transform:translate(0px,0px);}
  506. }
  507.  
  508. /*左眼眉动画*/
  509. @-webkit-keyframes eyebrow-left
  510. {
  511.     0%{opacity:; -webkit-transform:translateY(-25px); transform:translateY(-25px);}
  512.     70%{opacity:; -webkit-transform:translateY(5px); transform:translateY(5px);}
  513.     100%{opacity:; -webkit-transform:translateY(0); transform:translateY(0);}
  514. }
  515. @keyframes eyebrow-left
  516. {
  517.     0%{opacity:; -webkit-transform:translateY(-25px); transform:translateY(-25px);}
  518.     70%{opacity:; -webkit-transform:translateY(5px); transform:translateY(5px);}
  519.     100%{opacity:; -webkit-transform:translateY(0); transform:translateY(0);}
  520. }
  521.  
  522. /*右眼眉动画*/
  523. @-webkit-keyframes eyebrow-right
  524. {
  525.     0%{opacity:; -webkit-transform:translateY(-25px); transform:translateY(-25px);}
  526.     70%{opacity:; -webkit-transform:translateY(5px); transform:translateY(5px);}
  527.     100%{opacity:; -webkit-transform:rotate(9deg) translateY(0); transform:rotate(9deg) translateY(0);}
  528. }
  529. @keyframes eyebrow-right
  530. {
  531.     0%{opacity:; -webkit-transform:translateY(-25px); transform:translateY(-25px);}
  532.     70%{opacity:; -webkit-transform:translateY(5px); transform:translateY(5px);}
  533.     100%{opacity:; -webkit-transform:rotate(9deg) translateY(0); transform:rotate(9deg) translateY(0);}
  534. }
  535.  
  536. /*眉毛上升动画*/
  537. @-webkit-keyframes eyebrow-right-raise
  538. {
  539.     0%{top:-35px;}
  540.     70%{top:-35px;}
  541.     100%{top:-45px;}
  542. }
  543. @keyframes eyebrow-right-raise
  544. {
  545.     0%{top:-35px;}
  546.     70%{top:-35px;}
  547.     100%{top:-45px;}
  548. }
  549.  
  550. /*背景高亮light动画*/
  551. @-webkit-keyframes tight-light
  552. {
  553.     0%{opacity:; -webkit-transform:translate(200px,0px); transform:translate(200px,0px);}
  554.     100%{opacity:0.2; -webkit-transform:rotate(45deg) translate(0px,0px); transform:rotate(45deg) translate(0px,0px);}
  555. }
  556. @keyframes tight-light
  557. {
  558.     0%{opacity:; -webkit-transform:translate(200px,0px); transform:translate(200px,0px);}
  559.     100%{opacity:0.2; -webkit-transform:rotate(45deg) translate(0px,0px); transform:rotate(45deg) translate(0px,0px);}
  560. }
  561.  
  562. /*背景高亮dark动画*/
  563. @-webkit-keyframes tight-dark
  564. {
  565.     0%{opacity:; -webkit-transform:translate(-200px,0px); transform:translate(-200px,0px);}
  566.     100%{opacity:0.2; -webkit-transform:rotate(-45deg) translate(0px,0px); transform:rotate(-45deg) translate(0px,0px);}
  567. }
  568. @keyframes tight-dark
  569. {
  570.     0%{opacity:; -webkit-transform:translate(-200px,0px); transform:translate(-200px,0px);}
  571.     100%{opacity:0.2; -webkit-transform:rotate(-45deg) translate(0px,0px); transform:rotate(-45deg) translate(0px,0px);}
  572. }
  573.  
  574. /*外面黄色圈动画*/
  575. @-webkit-keyframes border_circle
  576. {
  577.     0%{ border-width:20px; transform:scale(0); -webkit-transform:scale(0);}
  578.     40%{ border-width:20px; transform:scale(1); -webkit-transform:scale(1); margin-left:-220px; margin-top:-220px;}
  579.     100%{ border-width:0px; transform:scale(1.5); -webkit-transform:scale(1.5); border-style:double; margin-left:-200px; margin-top:-200px;}
  580. }
  581. @keyframes border_circle
  582. {
  583.     0%{ border-width:20px; transform:scale(0); -webkit-transform:scale(0);}
  584.     40%{ border-width:20px; transform:scale(1); -webkit-transform:scale(1); margin-left:-220px; margin-top:-220px;}
  585.     100%{ border-width:0px; transform:scale(1.5); -webkit-transform:scale(1.5); border-style:double; margin-left:-200px; margin-top:-200px;}
  586. }
  587.  
  588. /*文字*/
  589. @-webkit-keyframes shirt-text
  590. {
  591.     0%{opacity:; -webkit-transform:translate(0px, 80px); transform:translate(0px, 80px);}
  592.     60%{opacity:; -webkit-transform:translate(0px, -50px); transform:translate(0px, -50px);}
  593.     80%{opacity:; -webkit-transform:translate(0px, 140px); transform:translate(0px, 140px);}
  594.     100%{opacity:; -webkit-transform:translate(0px, 100px); transform:translate(0px, 100px);}
  595. }
  596. @keyframes shirt-text
  597. {
  598.     0%{opacity:; -webkit-transform:translate(0px, 80px); transform:translate(0px, 80px);}
  599.     60%{opacity:; -webkit-transform:translate(0px, -50px); transform:translate(0px, -50px);}
  600.     80%{opacity:; -webkit-transform:translate(0px, 140px); transform:translate(0px, 140px);}
  601.     100%{opacity:; -webkit-transform:translate(0px, 100px); transform:translate(0px, 100px);}
  602. }
  603. @-webkit-keyframes heart
  604. {
  605.     0%{ }
  606.     30%{color:#00FF99;}
  607.     70%{color:#FFFF00;}
  608.     100%{}
  609. }
  610. @keyframes heart
  611. {
  612.     0%{ }
  613.     30%{color:#00FF99;}
  614.     70%{color:#FFFF00;}
  615.     100%{}
  616. }
  617.  
  618. /*音符*/
  619. @-webkit-keyframes note
  620. {
  621.     0% {
  622.       opacity:;
  623.       -webkit-transform: translate(0px,50px);
  624.       transform: translate(0px,50px);
  625.     }
  626.     30% {
  627.       -webkit-transform:rotate(12deg) translate(-30px,0px);
  628.       transform:rotate(12deg) translate(-30px,0px);
  629.     }
  630.     45% {
  631.       opacity:;
  632.     }
  633.     60% {
  634.       -webkit-transform: rotate(-12deg) translate(30px,-100px);
  635.       transform:rotate(-12deg) translate(30px,-100px);
  636.     }
  637.     100% {
  638.       opacity:;
  639.       -webkit-transform:rotate(0deg) translate(0px,-200px);
  640.       transform:rotate(0deg) translate(0px,-200px);
  641.     }
  642. }
  643. @keyframes note
  644. {
  645.     0% {
  646.       opacity:;
  647.       -webkit-transform: translate(0px,50px);
  648.       transform: translate(0px,50px);
  649.     }
  650.     30% {
  651.       -webkit-transform:rotate(12deg) translate(-30px,0px);
  652.       transform:rotate(12deg) translate(-30px,0px);
  653.     }
  654.     45% {
  655.       opacity:;
  656.     }
  657.     60% {
  658.       -webkit-transform: rotate(-12deg) translate(30px,-100px);
  659.       transform:rotate(-12deg) translate(30px,-100px);
  660.     }
  661.     100% {
  662.       opacity:;
  663.       -webkit-transform:rotate(0deg) translate(0px,-200px);
  664.       transform:rotate(0deg) translate(0px,-200px);
  665.     }
  666. }

使用CSS3各个属性实现小人的动画的更多相关文章

  1. css3 transition属性变化与animation动画的相似性以及不同点

    下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transiti ...

  2. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  3. 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果

    摘要: 通过backface-visibility:hidden;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... ...

  4. web前端学习（三）css学习笔记部分（8）-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

  5. CSS3 animation属性中的steps实现GIF动图(逐帧动画)

    相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...

  6. CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）

    CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...

  7. CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）

    一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...

  8. css3 animation 属性众妙

    转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...

  9. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

随机推荐

  1. easyui 复选框 onClickRow事件与onSelect事件与onCheck事件

    在项目中一直存在一个问题,一直都没发现问题的根源在哪里.在我们测试这边也是偶尔会出现.但是每次我去测试的时候也没问题.今天终于找到原因了! 在easyui中点击行和点击复选框触发的事件是不一样的! 点 ...

  2. Android中实现全屏、无标题栏的两种办法

    在进行UI设计时,我们经常需要将屏幕设置成无标题栏或者全屏.要实现起来也非常简单,主要有两种方法:配置xml文件和编写代码设置. 1.在xml文件中进行配置 在项目的清单文件AndroidManife ...

  3. Unity学习笔记

    『 知识点』 [射线] 射线检测碰撞 『游戏实战』 个例 [E]<愤怒的小鸟> 资源 免费Unity基础教程(中文电子书) [E] noobtus(Unity游戏教程)

  4. javadoc相关问题

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...

  5. 弹层组件-layer

    layer是Layui的一个弹层组建,功能强大,总之我很喜欢,下面介绍这个组件的基本用法. 首先如果只需要使用layer而不想使用Layui可以单独下载layer组件包,页面引入jquery1.8以上 ...

  6. ps切图抠图详解-web前端（转）

    网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.p ...

  7. Jquery动态操作checkbox

    问题的由来:html页面中使用checkbox给新建用户授权,然后提交到后台服务器,完成给用户授权.用户授权完成之后,如果用户的权限发生改变管理员需要修改多个用户的权限或查看某用户的权限,点击不同的用 ...

  8. 纯CSS tooltip 提示

    一般的tooltip,使用超链接的title,或者是css+javascript生成. 如果页面布局合理,样式结构清晰,可以使用纯CSS的提示. demo如下: a.tooltip { positio ...

  9. js判断是否是微信浏览器

    <script type="text/javascript"> window.onload = function(){ if(isWeiXin()){ var p = ...

  10. Scala学习（一）

    最近在学习Scala,总结了一下比较基础的知识. 一.Scala简介 1.Scalable Language,是一门多范式的编程语言,是一种纯面向对象的语言,每个值都是对象. 2.特点:①Scalab ...