栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

非常震撼的纯CSS3人物行走动画

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

本文分享给大家的是一个用纯CSS3实现的人物行走动画,在没有使用Javascript的情况下,用CSS3技术将人物行走的姿态描绘得非常逼真。其实动画实现的原理也是比较简单的,将人物行走时的状态分割成多张图片,然后利用CSS3的动画属性将这些图片串联起来形成人物行走动画效果。

HTML代码

XML/HTML Code复制内容到剪贴板
  1.   
  2.           
  3.             
  
  •             
  •   
  •             
  •   
  •             
  •   
  •               
  •               
  •               
  •               
  •           
  •           
  •           
  •               
  •               
  •               
  •               
  •           
  •           
  •           
  •           
  •   
  •               
  •                   
  •                       
  •                           
  •                               
  •                                   
  •                               
  •                           
  •                       
  •                   
  •    
  •   
  •                   
  •                       
  •                           
  •                               
  •                                   
  •                               
  •                           
  •                       
  •                   
  •    
  •   
  •                   
  •                       
  •                           
  •                       
  •                   
  •    
  •   
  •                   
  •                       
  •                           
  •                       
  •                   
  •    
  •   
  •               
  •    
  •           
  •    
  •   
  •           
  •       
  • 基本CSS代码

    CSS Code复制内容到剪贴板
    1. #canvas {   
    2.     height: 600px;   
    3.     width: 760px;   
    4.     margin: 0;   
    5.     padding: 0;   
    6.     position: relative;   
    7.     overflow: hidden;   
    8. }   
    9.   
    10. #canvas div {   
    11.     position: absolute;   
    12.     -webkit-animation-iteration-count: infinite;   
    13.     -moz-animation-iteration-count: infinite;   
    14.     -ms-animation-iteration-count: infinite;   
    15.     -o-animation-iteration-count: infinite;   
    16.     animation-iteration-count: infinite;   
    17.   
    18.     -webkit-animation-timing-function: linear;   
    19.     -moz-animation-timing-function: linear;   
    20.     -ms-animation-timing-function: linear;   
    21.     -o-animation-timing-function: linear;   
    22.     animation-timing-function: linear;   
    23. }   
    24.   
    25. #canvas:target div:not(.overlay) {   
    26.     border: 1px solid black;   
    27. }   
    28.   
    29. #canvas:target div.me div{   
    30.     background: rgba(255, 255, 255, 0.25);   
    31. }   
    32.   
    33. .me {   
    34.     top: 50px; left: 350px;   
    35.     -webkit-animation-name: me;   
    36.     -moz-animation-name: me;   
    37.     -ms-animation-name: me;   
    38.     -o-animation-name: me;   
    39.     animation-name: me;   
    40. }   
    41.   
    42. .me, .me div {   
    43.     background-repeat: no-repeat;   
    44.     -webkit-animation-duration: 1750ms;   
    45.     -moz-animation-duration: 1750ms;   
    46.     -ms-animation-duration: 1750ms;   
    47.     -o-animation-duration: 1750ms;   
    48.     animation-duration: 1750ms;   
    49. }   
    50.   
    51. .torso {   
    52.     width: 86px; height: 275px;   
    53.     background-image: url(images/me/torso.png);   
    54. }   
    55.   
    56. .arm {   
    57.     left: 12px;   
    58.     -webkit-transform-origin: 20px 10px;   
    59.     -moz-transform-origin: 20px 10px;   
    60.     -ms-transform-origin: 20px 10px;   
    61.     -o-transform-origin: 20px 10px;   
    62.     transform-origin: 20px 10px;   
    63. }   
    64.   
    65. .rightright.arm {   
    66.     top: 93px;   
    67.     -webkit-animation-name: rightright-bicep;   
    68.     -moz-animation-name: rightright-bicep;   
    69.     -ms-animation-name: rightright-bicep;   
    70.     -o-animation-name: rightright-bicep;   
    71.     animation-name: rightright-bicep;   
    72. }   
    73. .left.arm {   
    74.     top: 87px;   
    75.     -webkit-animation-name: left-bicep;   
    76.     -moz-animation-name: left-bicep;   
    77.     -ms-animation-name: left-bicep;   
    78.     -o-animation-name: left-bicep;   
    79.     animation-name: left-bicep;   
    80. }   
    81.   
    82. .bicep {   
    83.     height: 124px; width: 51px;   
    84. }   
    85.   
    86. .rightright.bicep { background-image: url(images/me/rightright-bicep.png); }   
    87. .left.bicep { background-image: url(images/me/left-bicep.png); }   
    88.   
    89. .forearm {   
    90.     top: 108px; left: 14px;   
    91.     width: 36px; height: 121px;   
    92.     -webkit-transform-origin: 3px 7px;   
    93.     -moz-transform-origin: 3px 7px;   
    94.     -ms-transform-origin: 3px 7px;   
    95.     -o-transform-origin: 3px 7px;   
    96.     transform-origin: 3px 7px;   
    97. }   
    98.   
    99. .rightright.forearm {   
    100.     background-image: url(images/me/rightright-forearm.png);   
    101.     -webkit-animation-name: rightright-forearm;   
    102.     -moz-animation-name: rightright-forearm;   
    103.     -ms-animation-name: rightright-forearm;   
    104.     -o-animation-name: rightright-forearm;   
    105.     animation-name: rightright-forearm;   
    106. }   
    107.   
    108. .left.forearm {   
    109.     background-image: url(images/me/left-forearm.png);   
    110.     -webkit-animation-name: left-forearm;   
    111.     -moz-animation-name: left-forearm;   
    112.     -ms-animation-name: left-forearm;   
    113.     -o-animation-name: left-forearm;   
    114.     animation-name: left-forearm;   
    115. }   
    116.   
    117. .leg {   
    118.     left: 6px;   
    119.     -webkit-transform-origin: 30px 20px;   
    120.     -moz-transform-origin: 30px 20px;   
    121.     -ms-transform-origin: 30px 20px;   
    122.     -o-transform-origin: 30px 20px;   
    123.     transform-origin: 30px 20px;   
    124.     -webkit-animation-name: thigh;   
    125.     -moz-animation-name: thigh;   
    126.     -ms-animation-name: thigh;   
    127.     -o-animation-name: thigh;   
    128.     animation-name: thigh;   
    129. }   
    130.   
    131. .rightright.leg {   
    132.     top: 235px;   
    133.     -webkit-animation-name: rightright-thigh;   
    134.     -moz-animation-name: rightright-thigh;   
    135.     -ms-animation-name: rightright-thigh;   
    136.     -o-animation-name: rightright-thigh;   
    137.     animation-name: rightright-thigh;   
    138. }   
    139.   
    140. .left.leg {   
    141.     top: 225px;   
    142.     -webkit-animation-name: left-thigh;   
    143.     -moz-animation-name: left-thigh;   
    144.     -ms-animation-name: left-thigh;   
    145.     -o-animation-name: left-thigh;   
    146.     animation-name: left-thigh;   
    147. }   
    148.   
    149. .thigh {   
    150.     width: 70px; height: 145px;   
    151. }   
    152.   
    153. .left.thigh { background-image: url(images/me/left-thigh.png); }   
    154. .rightright.thigh { background-image: url(images/me/rightright-thigh.png); }   
    155.   
    156. .shin {   
    157.     top: 115px;   
    158.     width: 50px; height: 170px;   
    159.     background-image: url(images/me/shin.png);   
    160.     -webkit-transform-origin: 30px 25px;   
    161.     -moz-transform-origin: 30px 25px;   
    162.     -ms-transform-origin: 30px 25px;   
    163.     -o-transform-origin: 30px 25px;   
    164.     transform-origin: 30px 25px;   
    165. }   
    166.   
    167. .rightright.shin {   
    168.     -webkit-animation-name: rightright-shin;   
    169.     -moz-animation-name: rightright-shin;   
    170.     -ms-animation-name: rightright-shin;   
    171.     -o-animation-name: rightright-shin;   
    172.     animation-name: rightright-shin;   
    173. }   
    174. .left.shin {   
    175.     -webkit-animation-name: left-shin;   
    176.     -moz-animation-name: left-shin;   
    177.     -ms-animation-name: left-shin;   
    178.     -o-animation-name: left-shin;   
    179.     animation-name: left-shin;   
    180. }   
    181.   
    182. .foot {   
    183.     top: 155px; left: 2px;   
    184.     width: 67px; height: 34px;   
    185.     background-image: url(images/me/foot.png);   
    186.     -webkit-transform-origin: 0 50%;   
    187.     -moz-transform-origin: 0 50%;   
    188.     -ms-transform-origin: 0 50%;   
    189.     -o-transform-origin: 0 50%;   
    190.     transform-origin: 0 50%;   
    191. }   
    192.   
    193. .rightright.foot {   
    194.     -webkit-animation-name: rightright-foot;   
    195.     -moz-animation-name: rightright-foot;   
    196.     -ms-animation-name: rightright-foot;   
    197.     -o-animation-name: rightright-foot;   
    198.     animation-name: rightright-foot;   
    199. }   
    200. .left.foot {   
    201.     -webkit-animation-name: left-foot;   
    202.     -moz-animation-name: left-foot;   
    203.     -ms-animation-name: left-foot;   
    204.     -o-animation-name: left-foot;   
    205.     animation-name: left-foot;   
    206. }   
    207.   
    208. .toes {   
    209.     top: 9px; left: 66px;   
    210.     width: 28px; height: 25px;   
    211.     background-image: url(images/me/toes.png);   
    212.     -webkit-transform-origin: 0% 100%;   
    213.     -moz-transform-origin: 0% 100%;   
    214.     -ms-transform-origin: 0% 100%;   
    215.     -o-transform-origin: 0% 100%;   
    216.     transform-origin: 0% 100%;   
    217. }   
    218.   
    219. .rightright.toes {   
    220.     -webkit-animation-name: rightright-toes;   
    221.     -moz-animation-name: rightright-toes;   
    222.     -ms-animation-name: rightright-toes;   
    223.     -o-animation-name: rightright-toes;   
    224.     animation-name: rightright-toes;   
    225. }   
    226. .left.toes {   
    227.     -webkit-animation-name: left-toes;   
    228.     -moz-animation-name: left-toes;   
    229.     -ms-animation-name: left-toes;   
    230.     -o-animation-name: left-toes;   
    231.     animation-name: left-toes;   
    232. }   
    233.   
    234. .shadow {   
    235.     width: 200px; height: 70px;   
    236.     left: 270px; bottombottom: 5px;   
    237.     background-image: url(images/misc/shadow.png);   
    238.     -webkit-animation-name: shadow;   
    239.     -moz-animation-name: shadow;   
    240.     -ms-animation-name: shadow;   
    241.     -o-animation-name: shadow;   
    242.     animation-name: shadow;   
    243. }   
    244.   
    245.   
    246.   
    247. div.rightright.arm { z-index: 1; }   
    248. div.left.arm { z-index: -3; }   
    249. div.arm > div.bicep > div.forearm { z-index: -1; }   
    250.   
    251. div.rightright.leg { z-index: -1; }   
    252. div.left.leg { z-index: -2; }   
    253. div.leg > div.thigh > div.shin { z-index: -1; }   
    254.   
    255. .overlay {   
    256.     width: 100%; height: 100%;   
    257.     background: url(images/misc/gradient-left.png) repeat-y top left,   
    258.                 url(images/misc/gradient-rightright.png) repeat-y top rightright;   
    259. }   
    260.   
    261. .sky div {   
    262.     background-repeat: no-repeat;   
    263.     -webkit-animation-name: prop-1200;   
    264.     -moz-animation-name: prop-1200;   
    265.     -ms-animation-name: prop-1200;   
    266.     -o-animation-name: prop-1200;   
    267.     animation-name: prop-1200;   
    268. }   
    269.   
    270. .cloud-1, .cloud-2 {   
    271.     width: 82px; height: 90px;   
    272.     background-image: url(images/clouds/1.png);   
    273.     -webkit-animation-duration: 120s;   
    274.     -moz-animation-duration: 120s;   
    275.     -ms-animation-duration: 120s;   
    276.     -o-animation-duration: 120s;   
    277.     animation-duration: 120s;   
    278. }   
    279.   
    280. .cloud-3, .cloud-4 {   
    281.     top: 70px;   
    282.     width: 159px; height: 90px;   
    283.     background-image: url(images/clouds/2.png);   
    284.     -webkit-animation-duration: 80s;   
    285.     -moz-animation-duration: 80s;   
    286.     -ms-animation-duration: 80s;   
    287.     -o-animation-duration: 80s;   
    288.     animation-duration: 80s;   
    289. }   
    290.   
    291. .cloud-5, .cloud-6 {   
    292.     top: 30px;   
    293.     width: 287px; height: 62px;   
    294.     background-image: url(images/clouds/3.png);   
    295.     -webkit-animation-duration: 140s;   
    296.     -moz-animation-duration: 140s;   
    297.     -ms-animation-duration: 140s;   
    298.     -o-animation-duration: 140s;   
    299.     animation-duration: 140s;   
    300. }   
    301.   
    302. .cloud-7, .cloud-8 {   
    303.     top: 100px;   
    304.     width: 94px; height: 81px;   
    305.     background-image: url(images/clouds/4.png);   
    306.     -webkit-animation-duration: 90s;   
    307.     -moz-animation-duration: 90s;   
    308.     -ms-animation-duration: 90s;   
    309.     -o-animation-duration: 90s;   
    310.     animation-duration: 90s;   
    311. }   
    312.   
    313. .cloud-1 { left: 0px; }   
    314. .cloud-2 { left: 1200px; }   
    315.   
    316. .cloud-3 { left: 250px; }   
    317. .cloud-4 { left: 1450px; }   
    318.   
    319. .cloud-5 { left: 500px; }   
    320. .cloud-6 { left: 1700px; }   
    321.   
    322. .cloud-7 { left: 950px; }   
    323. .cloud-8 { left: 2150px; }   
    324.   
    325. .horizon {   
    326.     top: 350px;   
    327.     width: 1800px; height: 50px;   
    328.     background: url(images/misc/horizon.png) repeat-x;   
    329.     -webkit-animation-name: prop-600;   
    330.     -moz-animation-name: prop-600;   
    331.     -ms-animation-name: prop-600;   
    332.     -o-animation-name: prop-600;   
    333.     animation-name: prop-600;   
    334.     -webkit-animation-duration: 40s;   
    335.     -moz-animation-duration: 40s;   
    336.     -ms-animation-duration: 40s;   
    337.     -o-animation-duration: 40s;   
    338.     animation-duration: 40s;   
    339. }   
    340.   
    341. .ground div {   
    342.     background-repeat: no-repeat;   
    343.     -webkit-animation-name: prop-2000;   
    344.     -moz-animation-name: prop-2000;   
    345.     -ms-animation-name: prop-2000;   
    346.     -o-animation-name: prop-2000;   
    347.     animation-name: prop-2000;   
    348. }   
    349.   
    350. .sign-all-css {   
    351.     width: 160px; height: 188px;   
    352.     top: 325px; left: 1600px;   
    353.     background-image: url(images/signs/all-css.png);   
    354.     -webkit-animation-duration: 35s;   
    355.     -moz-animation-duration: 35s;   
    356.     -ms-animation-duration: 35s;   
    357.     -o-animation-duration: 35s;   
    358.     animation-duration: 35s;   
    359. }   
    360.   
    361. .sign-lots-of-divs {   
    362.     width: 102px; height: 120px;   
    363.     top: 345px; left: 1150px;   
    364.     background-image: url(images/signs/lots-of-divs.png);   
    365.     -webkit-animation-duration: 56s;   
    366.     -moz-animation-duration: 56s;   
    367.     -ms-animation-duration: 56s;   
    368.     -o-animation-duration: 56s;   
    369.     animation-duration: 56s;   
    370. }   
    371.   
    372. .sign-no-js {   
    373.     width: 65px; height: 77px;   
    374.     top: 348px; left: 1150px;   
    375.     background-image: url(images/signs/no-js.png);   
    376.     -webkit-animation-duration: 71s;   
    377.     -moz-animation-duration: 71s;   
    378.     -ms-animation-duration: 71s;   
    379.     -o-animation-duration: 71s;   
    380.     animation-duration: 71s;   
    381. }   
    382.   
    383. .sign-best {   
    384.     width: 43px; height: 50px;   
    385.     top: 350px; left: 1000px;   
    386.     background-image: url(images/signs/best.png);   
    387.     -webkit-animation-duration: 95s;   
    388.     -moz-animation-duration: 95s;   
    389.     -ms-animation-duration: 95s;   
    390.     -o-animation-duration: 95s;   
    391.     animation-duration: 95s;   
    392. }   
    393.   

    CSS动画相关代码

    CSS Code复制内容到剪贴板
    1. @-webkit-keyframes me {   
    2.     0% { -webkit-transform:   rotate(5deg) translate( 5px,   0px); }   
    3.     25% { -webkit-transform:  rotate(5deg) translate(-5px, -14px); }   
    4.     50% { -webkit-transform:  rotate(5deg) translate( 5px,   0px); }   
    5.     75% { -webkit-transform:  rotate(5deg) translate(-5px, -14px); }   
    6.     100% { -webkit-transform: rotate(5deg) translate( 5px,   0px); }   
    7. }   
    8.   
    9. @-webkit-keyframes rightright-bicep {   
    10.     0%   { -webkit-transform: rotate(26deg); }   
    11.     50%  { -webkit-transform: rotate(-20deg); }   
    12.     100% { -webkit-transform: rotate(26deg); }   
    13. }   
    14.   
    15. @-webkit-keyframes left-bicep {   
    16.     0%   { -webkit-transform: rotate(-20deg); }   
    17.     50%  { -webkit-transform: rotate(26deg); }   
    18.     100% { -webkit-transform: rotate(-20deg); }   
    19. }   
    20.   
    21. @-webkit-keyframes rightright-forearm {   
    22.     0%   { -webkit-transform: rotate(-10deg); }   
    23.     50%  { -webkit-transform: rotate(-45deg); }   
    24.     100% { -webkit-transform: rotate(-10deg); }   
    25. }   
    26.   
    27. @-webkit-keyframes left-forearm {   
    28.     0%   { -webkit-transform: rotate(-45deg); }   
    29.     50%  { -webkit-transform: rotate(-10deg); }   
    30.     100% { -webkit-transform: rotate(-45deg); }   
    31. }   
    32.   
    33. @-webkit-keyframes rightright-thigh {   
    34.     0%   { -webkit-transform: rotate(-45deg); }   
    35.     50%  { -webkit-transform: rotate(10deg); }   
    36.     100% { -webkit-transform: rotate(-45deg); }   
    37. }   
    38.   
    39. @-webkit-keyframes left-thigh {   
    40.     0%   { -webkit-transform: rotate(10deg); }   
    41.     50%  { -webkit-transform: rotate(-45deg); }   
    42.     100% { -webkit-transform: rotate(10deg); }   
    43. }   
    44.   
    45. @-webkit-keyframes rightright-shin {   
    46.     0%   { -webkit-transform: rotate(30deg); }   
    47.     25%  { -webkit-transform: rotate(20deg); }   
    48.     50%  { -webkit-transform: rotate(20deg); }   
    49.     75%  { -webkit-transform: rotate(85deg); }   
    50.     100% { -webkit-transform: rotate(30deg); }   
    51. }   
    52.   
    53. @-webkit-keyframes left-shin {   
    54.     0%   { -webkit-transform: rotate(20deg); }   
    55.     25%  { -webkit-transform: rotate(85deg); }   
    56.     50%  { -webkit-transform: rotate(30deg); }   
    57.     75%  { -webkit-transform: rotate(20deg); }   
    58.     100% { -webkit-transform: rotate(20deg); }   
    59. }   
    60.   
    61. @-webkit-keyframes rightright-foot {   
    62.     0%   { -webkit-transform: rotate(-5deg); }   
    63.     25%  { -webkit-transform: rotate(-7deg); }   
    64.     50%  { -webkit-transform: rotate(-16deg); }   
    65.     75%  { -webkit-transform: rotate(-10deg); }   
    66.     100% { -webkit-transform: rotate(-5deg); }   
    67. }   
    68.   
    69. @-webkit-keyframes left-foot {   
    70.     0%   { -webkit-transform: rotate(-16deg); }   
    71.     25%  { -webkit-transform: rotate(-10deg); }   
    72.     50%  { -webkit-transform: rotate(-5deg); }   
    73.     75%  { -webkit-transform: rotate(-7deg); }   
    74.     100% { -webkit-transform: rotate(-16deg); }   
    75. }   
    76.   
    77. @-webkit-keyframes rightright-toes {   
    78.     0%   { -webkit-transform: rotate(0deg); }   
    79.     25%  { -webkit-transform: rotate(-10deg); }   
    80.     50%  { -webkit-transform: rotate(-10deg); }   
    81.     75%  { -webkit-transform: rotate(-25deg); }   
    82.     100% { -webkit-transform: rotate(0deg); }   
    83. }   
    84.   
    85. @-webkit-keyframes left-toes {   
    86.     0%   { -webkit-transform: rotate(-10deg); }   
    87.     25%  { -webkit-transform: rotate(-25deg); }   
    88.     50%  { -webkit-transform: rotate(0deg); }   
    89.     75%  { -webkit-transform: rotate(-10deg); }   
    90.     100% { -webkit-transform: rotate(-10deg); }   
    91. }   
    92.   
    93. @-webkit-keyframes shadow {   
    94.     0%   { opacity: 1; }   
    95.     25%  { opacity: 0.75; }   
    96.     50%  { opacity: 1; }   
    97.     75%  { opacity: 0.75; }   
    98.     100% { opacity: 1; }   
    99. }   
    100.   
    101. @-webkit-keyframes prop-600 {   
    102.     0%   { -webkit-transform: translateX(0px); }   
    103.     100% { -webkit-transform: translateX(-600px); }   
    104. }   
    105.   
    106. @-webkit-keyframes prop-1200 {   
    107.     0%   { -webkit-transform: translateX(0px); }   
    108.     100% { -webkit-transform: translateX(-1200px); }   
    109. }   
    110.   
    111. @-webkit-keyframes prop-2000 {   
    112.     0%   { -webkit-transform: translateX(0px); }   
    113.     100% { -webkit-transform: translateX(-2000px); }   
    114. }   

    以上就是本文的全部内容,希望对大家的学习有所帮助。

    转载请注明:文章转载自 www.mshxw.com
    本文地址:https://www.mshxw.com/it/216098.html

    CSS教程相关栏目本月热门文章

    我们一直用心在做
    关于我们 文章归档 网站地图 联系我们

    版权所有 (c)2021-2022 MSHXW.COM

    ICP备案号:晋ICP备2021003244-6号