HTML5实现小鸟卡通动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5实现小鸟卡通动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML5实现小鸟卡通动画</title>
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>
<svg width="500px" height="500px" viewBox="0 0 500 698" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin-top:50px">
	<title>pioupiou</title>
	<defs>
        <circle id="path-1" cx="116.5" cy="247.5" r="55.5"></circle>
        <circle id="path-2" cx="312" cy="244" r="74"></circle>
        <path id="path-3" d="M206.229489,326.283203 C191.248044,323.839844 181.09668,324.729492 147.420898,349.599609 C136.265103,357.838346 131.982422,366.358399 129.982422,375.829751 C127.982422,385.301102 128.313477,390.617186 135.475586,406.885743 C139.488855,416.001785 161.113281,426.285156 161.113281,426.285156 C161.113281,426.285156 182.030079,406.703326 192.488478,396.912411 C201.717579,388.272337 220.175781,370.992188 220.175781,370.992188 L178.738282,409.536131 C178.738282,409.536131 220.330075,411.405271 234.417966,402.085935 C248.505857,392.7666 252.633786,368.625002 250.840818,364.42383 C249.047849,360.222658 240.407667,331.857403 206.229489,326.283203 Z"></path>
    </defs>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="bird" transform="translate(3.000000, 3.000000)">
            <path d="M147.564453,474.880859 L123.632812,495.583984 L119.431641,507.742188 L122.660156,515.328125 L133.960938,515.072266 L140.048828,504.113281 L144.90625,501.013672 L133.632812,519.972656 L134.375,530.644531 L146.419922,535.359375 L157.320312,532.759766 L158.435547,521.115234 L163.392578,508.841797 L162.664062,523.214844 L169.136719,526.330078 L183.394531,523.730469 L186.867188,513.314453 L185.009766,501.541016 L184.636719,488.654297 C184.636719,488.654297 178.091797,474.896484 174.621094,474.896484 C171.150391,474.896484 147.564453,474.880859 147.564453,474.880859 Z" id="leftleg" stroke="#B49207" stroke-width="4" fill="#E9BE0A"></path>
            <path d="M285.705738,467 L258.734729,489.59325 L254,502.861456 L257.638544,511.139964 L270.374547,510.860746 L277.235613,498.901243 L282.709937,495.51865 L270.00475,516.208526 L270.841197,527.854707 L284.415848,533 L296.700611,530.163055 L297.957483,517.455417 L303.544067,504.061456 L302.723028,519.746714 L310.017725,523.146359 L326.086309,520.309414 L330,508.942451 L327.906682,496.094139 L327.486257,482.030906 C327.486257,482.030906 320.110117,467.017052 316.198627,467.017052 C312.287138,467.017052 285.705738,467 285.705738,467 Z" id="rightleg" stroke="#B49207" stroke-width="4" fill="#E9BE0A" transform="translate(292.500000, 499.500000) scale(-1, 1) translate(-292.500000, -499.500000) "></path>
            <path d="M105.290157,352.566502 C105.290157,352.566502 98.5603048,353.928858 94.4848668,353.843483 C53.0416266,352.975301 46.4061743,335.403733 12.9941377,319.295017 C-3.26548405,311.455877 5.42453723,341.566508 9.21649475,346.439548 C13.9236861,352.488754 30.2619501,355.638791 32.3320233,358.32822 C36.0569492,363.167625 7.42895059,351.422947 3.67460147,356.855563 C-6.09179315,370.987727 8.81078278,375.054308 19.5650082,377.126072 C23.1134863,377.809674 27.5598374,378.287205 36.6778318,378.287205 C45.7958262,378.287205 49.2676117,377.856537 49.2676117,378.287204 C49.2676117,380.293286 33.1938171,379.333913 25.2486897,383.154388 C19.3976005,385.96793 18.6769894,389.763038 25.2486897,394.517673 C34.9216517,401.516075 54.9103719,401.001899 66.8554258,399.716892 C73.6599228,398.984887 81.2407899,395.138882 81.1112171,395.630954 C80.4726722,398.055922 74.254986,398.865596 76.35321,403.589938 C81.0048219,414.063465 117.632535,403.151046 122.732132,394.289157" id="leftwing" stroke="#5D8A2A" stroke-width="4" fill="#6B9F2F"></path>
            <path d="M219,500 C299.633573,500 365,405.532082 365,289 C365,193.935248 309.615643,109.155172 248.464844,82.3867192 C246.201116,81.3957839 266.460938,29.6806643 258.802734,27.0224617 C251.144531,24.3642592 237.331833,79.0450666 232.460938,78.0000004 C230.394336,77.5566045 243.166016,18.0224596 243.166016,18.0224596 C243.166016,18.0224596 248.117188,1.49121219 243.166016,-0.301757176 C238.214844,-2.09472654 235.030004,12.9402118 234.671875,13.4580064 C231.543945,17.9804675 223.326377,78 219,78 C214.242291,78 203.742188,3.29296868 194.959274,11.2617187 C186.176361,19.2304688 207.105011,77.215409 203.828125,78.000002 C134.63319,94.5675175 73,184.302002 73,289 C73,405.532082 138.366427,500 219,500 Z" id="body" stroke="#5D8A29" stroke-width="4" fill="#7BB03E"></path>
            <g id="lefteye">
                <use stroke="none" fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
                <use stroke="#777" stroke-width="4" fill="none" xlink:href="#path-1"></use>
            </g>
            <g id="righteye">
                <use stroke="none" fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-2"></use>
                <use stroke="#777" stroke-width="4" fill="none" xlink:href="#path-2"></use>
            </g>
            <g id="beak">
                <use stroke="#B49206" stroke-width="4" fill="#EABE0A" fill-rule="evenodd" xlink:href="#path-3"></use>
                <use stroke="#979797" stroke-width="1" fill="none" xlink:href="#path-3"></use>
            </g>
            <path d="M137.5,259 C142.19442,259 146,255.19442 146,250.5 C146,245.80558 142.19442,242 137.5,242 C132.80558,242 129,245.80558 129,250.5 C129,255.19442 132.80558,259 137.5,259 Z" id="leftpupil" fill="#575757"></path>
            <path d="M277.5,259 C282.19442,259 286,255.19442 286,250.5 C286,245.80558 282.19442,242 277.5,242 C272.80558,242 269,245.80558 269,250.5 C269,255.19442 272.80558,259 277.5,259 Z" id="rightpupil" fill="#575757"></path>
            <path d="M352.494141,352.316407 C352.494141,352.316407 358.983376,353.678763 362.913102,353.593388 C402.874592,352.725206 409.272802,335.153638 441.490234,319.044922 C457.168514,311.205782 448.789193,341.316413 445.132812,346.189453 C440.593921,352.238659 424.83981,355.388696 422.84375,358.078125 C419.252004,362.91753 446.856445,351.172852 450.476562,356.605469 C459.893772,370.737632 445.524019,374.804214 435.154297,376.875977 C431.73269,377.559579 427.445312,378.03711 418.65332,378.03711 C409.861328,378.03711 406.513672,377.606442 406.513672,378.037109 C406.513672,380.043191 422.012769,379.083818 429.673828,382.904294 C435.315719,385.717835 436.010566,389.512943 429.673828,394.267578 C420.34671,401.26598 401.072661,400.751804 389.554688,399.466797 C382.993477,398.734793 375.683654,394.888788 375.808594,395.380859 C376.424308,397.805828 382.419689,398.615502 380.396484,403.339844 C375.911185,413.81337 340.593049,402.900951 335.675781,394.039062" id="rightwing" stroke="#5D8A2A" stroke-width="4" fill="#7BB03E"></path>
        </g>
    </g>
</svg>
<svg width="460px" height="100px" viewBox="0 0 460 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <ellipse id="shadow" fill="#BEAE6F" cx="210" cy="50" rx="115.5" ry="28"></ellipse>
</svg>
<div class="sky"></div>
</body>
</html>

CSS代码(style.css):

body{margin:0;padding-top:3em;background:#DDCF97;position:relative;}
.sky{position:absolute;left:0;right:0;top:0;height:550px;background:#D9EAFF;border-bottom:2px solid #BEAE6F;}
svg{margin:auto;padding:2em;display:block;z-index:1;position:relative;}
#bird{-webkit-animation:fly .9s ease-in-out infinite;animation:fly .9s ease-in-out infinite;}
#shadow{-webkit-animation:shadow .9s ease-in-out infinite;animation:shadow .9s ease-in-out infinite;}
#rightwing{-webkit-animation:rightwing .25s linear infinite;animation:rightwing .25s linear infinite;-webkit-transform-origin:330px 350px;-ms-transform-origin:330px 350px;transform-origin:330px 350px;}
#leftwing{-webkit-animation:leftwing .25s linear infinite;animation:leftwing .25s linear infinite;-webkit-transform-origin:90px 390px;-ms-transform-origin:90px 390px;transform-origin:90px 390px;}
#leftpupil{-webkit-animation:leftpupil 12s ease-in-out infinite;animation:leftpupil 12s ease-in-out infinite;}
#rightpupil{-webkit-animation:rightpupil 12s ease-in-out infinite;animation:rightpupil 12s ease-in-out infinite;}
@-webkit-keyframes fly{from{-webkit-transform:translateY(0);transform:translateY(0);}
50%{-webkit-transform:translateY(12px);transform:translateY(12px);}
}
@keyframes fly{from{-webkit-transform:translateY(0);transform:translateY(0);}
50%{-webkit-transform:translateY(12px);transform:translateY(12px);}
}
@-webkit-keyframes shadow{50%{-webkit-transform:scale(1.05) translateX(-10px);transform:scale(1.05) translateX(-10px);}
}
@keyframes shadow{50%{-webkit-transform:scale(1.05) translateX(-10px);transform:scale(1.05) translateX(-10px);}
}
@-webkit-keyframes rightwing{from{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
50%{-webkit-transform:rotate(40deg);transform:rotate(40deg);}
}
@keyframes rightwing{from{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
50%{-webkit-transform:rotate(40deg);transform:rotate(40deg);}
}
@-webkit-keyframes leftwing{from{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
50%{-webkit-transform:rotate(-30deg);transform:rotate(-30deg);}
}
@keyframes leftwing{from{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
50%{-webkit-transform:rotate(-30deg);transform:rotate(-30deg);}
}
@-webkit-keyframes leftpupil{17%{-webkit-transform:translateX(0);transform:translateX(0);}
20%{-webkit-transform:translateX(10px);transform:translateX(10px);}
47%{-webkit-transform:translateX(10px);transform:translateX(10px);}
50%{-webkit-transform:translateX(0) translateY(-30px);transform:translateX(0) translateY(-30px);}
82%{-webkit-transform:translateX(0) translateY(-30px);transform:translateX(0) translateY(-30px);}
85%{-webkit-transform:translateX(-50px) translateY(-5px);transform:translateX(-50px) translateY(-5px);}
97%{-webkit-transform:translateX(-50px) translateY(-5px);transform:translateX(-50px) translateY(-5px);}
}
@keyframes leftpupil{17%{-webkit-transform:translateX(0);transform:translateX(0);}
20%{-webkit-transform:translateX(10px);transform:translateX(10px);}
47%{-webkit-transform:translateX(10px);transform:translateX(10px);}
50%{-webkit-transform:translateX(0) translateY(-30px);transform:translateX(0) translateY(-30px);}
82%{-webkit-transform:translateX(0) translateY(-30px);transform:translateX(0) translateY(-30px);}
85%{-webkit-transform:translateX(-50px) translateY(-5px);transform:translateX(-50px) translateY(-5px);}
97%{-webkit-transform:translateX(-50px) translateY(-5px);transform:translateX(-50px) translateY(-5px);}
}
@-webkit-keyframes rightpupil{17%{-webkit-transform:translateX(0);transform:translateX(0);}
20%{-webkit-transform:translateX(70px);transform:translateX(70px);}
48%{-webkit-transform:translateX(70px);transform:translateX(70px);}
50%{-webkit-transform:translateX(0) translateY(-30px);transform:translateX(0) translateY(-30px);}
82%{-webkit-transform:translateX(0) translateY(-30px);transform:translateX(0) translateY(-30px);}
85%{-webkit-transform:translateX(-12px) translateY(-5px);transform:translateX(-12px) translateY(-5px);}
97%{-webkit-transform:translateX(-12px) translateY(-5px);transform:translateX(-12px) translateY(-5px);}
}
@keyframes rightpupil{17%{-webkit-transform:translateX(0);transform:translateX(0);}
20%{-webkit-transform:translateX(70px);transform:translateX(70px);}
48%{-webkit-transform:translateX(70px);transform:translateX(70px);}
50%{-webkit-transform:translateX(0) translateY(-30px);transform:translateX(0) translateY(-30px);}
82%{-webkit-transform:translateX(0) translateY(-30px);transform:translateX(0) translateY(-30px);}
85%{-webkit-transform:translateX(-12px) translateY(-5px);transform:translateX(-12px) translateY(-5px);}
97%{-webkit-transform:translateX(-12px) translateY(-5px);transform:translateX(-12px) translateY(-5px);}
}

附件:下载该文件资源,减少时间成本(增值服务)