首页 / HTML5 / html5css3实例教程一款html5和css3实现的小机器人走路动画_html5教程技巧

html5css3实例教程一款html5和css3实现的小机器人走路动画_html5教程技巧

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了html5css3实例教程一款html5和css3实现的小机器人走路动画_html5教程技巧，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10935字，纯文字阅读大概需要16分钟。

内容图文

　　之前介绍了好多款html5和css3实现的动画，今天要给大家带来一款html5和css3实现的小机器人走路动画。该实例的人物用html5绘画的，动画效果是html5和css3实现的。一起看下效果图。

　　实现的代码。

　　html代码：


代码如下:
<svg version="1.1" id="Layer_1" xmlns="http://www.gxlcms.com/2000/svg" xmlns:xlink="http://www..jb51.net/1999/xlink"
x="0px" y="0px" viewbox="0 0 458 337" enable-background="new 0 0 458 337" xml:space="preserve">























































<line id="right-eyebrow" fill="#4D4D4D" stroke="#000000" stroke-width="1.8222" x1="243.3"
y1="180.6" x2="266.4" y2="181.7" />
<line id="left-eyebrow" fill="#4D4D4D" stroke="#000000" stroke-width="1.8222" x1="272.4"
y1="177.4" x2="288.4" y2="164.6" />
<circle id="left-eye" stroke="#000000" stroke-width="0.9111" cx="283.6" cy="176.5"
r="3.8" />
<circle id="right-eye" stroke="#000000" stroke-width="0.9111" cx="257.5" cy="186.9"
r="3.8" />










<radialgradient id="SVGID_1_" cx="239.975" cy="271.2543" r="122.4974" gradienttransform="matrix(1 0 0 0.2541 0 202.3306)"
gradientunits="userSpaceOnUse">




　　css3代码：


代码如下:
html {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-moz-box-sizing: inherit;
box-sizing: inherit;
}

html,body {
height:100%;
margin: 0;
font: 40px/40px "Helvetica Neue";
font-weight: 900;
color: rgba(255, 255, 255, 1);
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}

svg {
width: 100%;
height: 100%;
}

#left-eye {
-webkit-transform-origin: 283px 176px;
-ms-transform-origin: 283px 176px;
transform-origin: 283px 176px;
/*animation: pulse 2s linear infinite;*/
}
#head {
-webkit-transform-origin: 235px 173px;
-ms-transform-origin: 235px 173px;
transform-origin: 235px 173px;
-webkit-animation: head 2s ease-in-out infinite;
animation: head 2s ease-in-out infinite;
}

#right-eyebrow, #left-eyebrow {
-webkit-animation: eyebrows 10s linear infinite;
animation: eyebrows 10s linear infinite;
}

#left-leg {
-webkit-transform-origin: 253px 225px;
-ms-transform-origin: 253px 225px;
transform-origin: 253px 225px;
-webkit-animation: leftleg 2s ease-in-out infinite;
animation: leftleg 2s ease-in-out infinite;
}

#right-leg {
-webkit-transform-origin: 225px 235px;
-ms-transform-origin: 225px 235px;
transform-origin: 225px 235px;
-webkit-animation: rightleg 2s ease-in-out infinite;
animation: rightleg 2s ease-in-out infinite;
}
#left-arm {
-webkit-transform-origin: 263px 186px;
-ms-transform-origin: 263px 186px;
transform-origin: 263px 186px;
-webkit-animation: leftarm 2s ease-in-out infinite;
animation: leftarm 2s ease-in-out infinite;
}

#right-arm {
-webkit-transform-origin: 209px 214px;
-ms-transform-origin: 209px 214px;
transform-origin: 209px 214px;
-webkit-animation: rightarm 2s ease-in-out infinite;
animation: rightarm 2s ease-in-out infinite;
}
#hair {
-webkit-filter: hue-rotate(45deg);
filter: hue-rotate(45deg); /* izza not workingz! */
}


@-webkit-keyframes leftleg {
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(55deg);
transform: rotate(55deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}


@keyframes leftleg {
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(55deg);
transform: rotate(55deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}

@-webkit-keyframes rightleg {
0%{
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
50%{
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
100%{
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
}

@keyframes rightleg {
0%{
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
50%{
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
100%{
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
}

@-webkit-keyframes rightarm {
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}

@keyframes rightarm {
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}

@-webkit-keyframes leftarm {
0%{
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
50%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
}

@keyframes leftarm {
0%{
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
50%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
}

@-webkit-keyframes head {
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}

@keyframes head {
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}


@-webkit-keyframes pulse {
0%{
-webkit-transform: scale(1);
transform: scale(1);
}
50%{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100%{
-webkit-transform: scale(1);
transform: scale(1);
}
}


@keyframes pulse {
0%{
-webkit-transform: scale(1);
transform: scale(1);
}
50%{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100%{
-webkit-transform: scale(1);
transform: scale(1);
}
}

@-webkit-keyframes eyebrows {
0%{

}
98%{
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
99%{
-webkit-transform: translate(0, -5px);
transform: translate(0, -5px);
}
100%{
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
}

@keyframes eyebrows {
0%{

}
98%{
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
99%{
-webkit-transform: translate(0, -5px);
transform: translate(0, -5px);
}
100%{
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
}　　

内容总结

以上是互联网集市为您收集整理的html5css3实例教程一款html5和css3实现的小机器人走路动画_html5教程技巧全部内容，希望文章能够帮你解决html5css3实例教程一款html5和css3实现的小机器人走路动画_html5教程技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/390392.html

来源：【匿名】