php人物走动,使用纯CSS3人物行走动画实例代码

最新推荐文章于 2022-09-07 19:01:06 发布
最新推荐文章于 2022-09-07 19:01:06 发布
阅读量220 收藏 1
点赞数
文章标签： php人物走动

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

5a9eebda863fd73ef2cde9074954221b.png

在线演示源码下载

HTML代码

基本CSS代码#canvas {

height: 600px;

width: 760px;

margin: 0;

padding: 0;

position: relative;

overflow: hidden;

}

#canvas p {

position: absolute;

-webkit-animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite;

-ms-animation-iteration-count: infinite;

-o-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

-moz-animation-timing-function: linear;

-ms-animation-timing-function: linear;

-o-animation-timing-function: linear;

animation-timing-function: linear;

}

#canvas:target p:not(.overlay) {

border: 1px solid black;

}

#canvas:target p.me p{

background: rgba(255, 255, 255, 0.25);

}

.me {

top: 50px; left: 350px;

-webkit-animation-name: me;

-moz-animation-name: me;

-ms-animation-name: me;

-o-animation-name: me;

animation-name: me;

}

.me, .me p {

background-repeat: no-repeat;

-webkit-animation-duration: 1750ms;

-moz-animation-duration: 1750ms;

-ms-animation-duration: 1750ms;

-o-animation-duration: 1750ms;

animation-duration: 1750ms;

}

.torso {

width: 86px; height: 275px;

background-image: url(images/me/torso.png);

}

.arm {

left: 12px;

-webkit-transform-origin: 20px 10px;

-moz-transform-origin: 20px 10px;

-ms-transform-origin: 20px 10px;

-o-transform-origin: 20px 10px;

transform-origin: 20px 10px;

}

.right.arm {

top: 93px;

-webkit-animation-name: right-bicep;

-moz-animation-name: right-bicep;

-ms-animation-name: right-bicep;

-o-animation-name: right-bicep;

animation-name: right-bicep;

}

.left.arm {

top: 87px;

-webkit-animation-name: left-bicep;

-moz-animation-name: left-bicep;

-ms-animation-name: left-bicep;

-o-animation-name: left-bicep;

animation-name: left-bicep;

}

.bicep {

height: 124px; width: 51px;

}

.right.bicep { background-image: url(images/me/right-bicep.png); }

.left.bicep { background-image: url(images/me/left-bicep.png); }

.forearm {

top: 108px; left: 14px;

width: 36px; height: 121px;

-webkit-transform-origin: 3px 7px;

-moz-transform-origin: 3px 7px;

-ms-transform-origin: 3px 7px;

-o-transform-origin: 3px 7px;

transform-origin: 3px 7px;

}

.right.forearm {

background-image: url(images/me/right-forearm.png);

-webkit-animation-name: right-forearm;

-moz-animation-name: right-forearm;

-ms-animation-name: right-forearm;

-o-animation-name: right-forearm;

animation-name: right-forearm;

}

.left.forearm {

background-image: url(images/me/left-forearm.png);

-webkit-animation-name: left-forearm;

-moz-animation-name: left-forearm;

-ms-animation-name: left-forearm;

-o-animation-name: left-forearm;

animation-name: left-forearm;

}

.leg {

left: 6px;

-webkit-transform-origin: 30px 20px;

-moz-transform-origin: 30px 20px;

-ms-transform-origin: 30px 20px;

-o-transform-origin: 30px 20px;

transform-origin: 30px 20px;

-webkit-animation-name: thigh;

-moz-animation-name: thigh;

-ms-animation-name: thigh;

-o-animation-name: thigh;

animation-name: thigh;

}

.right.leg {

top: 235px;

-webkit-animation-name: right-thigh;

-moz-animation-name: right-thigh;

-ms-animation-name: right-thigh;

-o-animation-name: right-thigh;

animation-name: right-thigh;

}

.left.leg {

top: 225px;

-webkit-animation-name: left-thigh;

-moz-animation-name: left-thigh;

-ms-animation-name: left-thigh;

-o-animation-name: left-thigh;

animation-name: left-thigh;

}

.thigh {

width: 70px; height: 145px;

}

.left.thigh { background-image: url(images/me/left-thigh.png); }

.right.thigh { background-image: url(images/me/right-thigh.png); }

.shin {

top: 115px;

width: 50px; height: 170px;

background-image: url(images/me/shin.png);

-webkit-transform-origin: 30px 25px;

-moz-transform-origin: 30px 25px;

-ms-transform-origin: 30px 25px;

-o-transform-origin: 30px 25px;

transform-origin: 30px 25px;

}

.right.shin {

-webkit-animation-name: right-shin;

-moz-animation-name: right-shin;

-ms-animation-name: right-shin;

-o-animation-name: right-shin;

animation-name: right-shin;

}

.left.shin {

-webkit-animation-name: left-shin;

-moz-animation-name: left-shin;

-ms-animation-name: left-shin;

-o-animation-name: left-shin;

animation-name: left-shin;

}

.foot {

top: 155px; left: 2px;

width: 67px; height: 34px;

background-image: url(images/me/foot.png);

-webkit-transform-origin: 0 50%;

-moz-transform-origin: 0 50%;

-ms-transform-origin: 0 50%;

-o-transform-origin: 0 50%;

transform-origin: 0 50%;

}

.right.foot {

-webkit-animation-name: right-foot;

-moz-animation-name: right-foot;

-ms-animation-name: right-foot;

-o-animation-name: right-foot;

animation-name: right-foot;

}

.left.foot {

-webkit-animation-name: left-foot;

-moz-animation-name: left-foot;

-ms-animation-name: left-foot;

-o-animation-name: left-foot;

animation-name: left-foot;

}

.toes {

top: 9px; left: 66px;

width: 28px; height: 25px;

background-image: url(images/me/toes.png);

-webkit-transform-origin: 0% 100%;

-moz-transform-origin: 0% 100%;

-ms-transform-origin: 0% 100%;

-o-transform-origin: 0% 100%;

transform-origin: 0% 100%;

}

.right.toes {

-webkit-animation-name: right-toes;

-moz-animation-name: right-toes;

-ms-animation-name: right-toes;

-o-animation-name: right-toes;

animation-name: right-toes;

}

.left.toes {

-webkit-animation-name: left-toes;

-moz-animation-name: left-toes;

-ms-animation-name: left-toes;

-o-animation-name: left-toes;

animation-name: left-toes;

}

.shadow {

width: 200px; height: 70px;

left: 270px; bottom: 5px;

background-image: url(images/misc/shadow.png);

-webkit-animation-name: shadow;

-moz-animation-name: shadow;

-ms-animation-name: shadow;

-o-animation-name: shadow;

animation-name: shadow;

}

/* setting proper z-indexes so that limbs show up correctly */

p.right.arm { z-index: 1; }

p.left.arm { z-index: -3; }

p.arm > p.bicep > p.forearm { z-index: -1; }

p.right.leg { z-index: -1; }

p.left.leg { z-index: -2; }

p.leg > p.thigh > p.shin { z-index: -1; }

.overlay {

width: 100%; height: 100%;

background: url(images/misc/gradient-left.png) repeat-y top left,

url(images/misc/gradient-right.png) repeat-y top right;

}

.sky p {

background-repeat: no-repeat;

-webkit-animation-name: prop-1200;

-moz-animation-name: prop-1200;

-ms-animation-name: prop-1200;

-o-animation-name: prop-1200;

animation-name: prop-1200;

}

.cloud-1, .cloud-2 {

width: 82px; height: 90px;

background-image: url(images/clouds/1.png);

-webkit-animation-duration: 120s;

-moz-animation-duration: 120s;

-ms-animation-duration: 120s;

-o-animation-duration: 120s;

animation-duration: 120s;

}

.cloud-3, .cloud-4 {

top: 70px;

width: 159px; height: 90px;

background-image: url(images/clouds/2.png);

-webkit-animation-duration: 80s;

-moz-animation-duration: 80s;

-ms-animation-duration: 80s;

-o-animation-duration: 80s;

animation-duration: 80s;

}

.cloud-5, .cloud-6 {

top: 30px;

width: 287px; height: 62px;

background-image: url(images/clouds/3.png);

-webkit-animation-duration: 140s;

-moz-animation-duration: 140s;

-ms-animation-duration: 140s;

-o-animation-duration: 140s;

animation-duration: 140s;

}

.cloud-7, .cloud-8 {

top: 100px;

width: 94px; height: 81px;

background-image: url(images/clouds/4.png);

-webkit-animation-duration: 90s;

-moz-animation-duration: 90s;

-ms-animation-duration: 90s;

-o-animation-duration: 90s;

animation-duration: 90s;

}

.cloud-1 { left: 0px; }

.cloud-2 { left: 1200px; }

.cloud-3 { left: 250px; }

.cloud-4 { left: 1450px; }

.cloud-5 { left: 500px; }

.cloud-6 { left: 1700px; }

.cloud-7 { left: 950px; }

.cloud-8 { left: 2150px; }

.horizon {

top: 350px;

width: 1800px; height: 50px;

background: url(images/misc/horizon.png) repeat-x;

-webkit-animation-name: prop-600;

-moz-animation-name: prop-600;

-ms-animation-name: prop-600;

-o-animation-name: prop-600;

animation-name: prop-600;

-webkit-animation-duration: 40s;

-moz-animation-duration: 40s;

-ms-animation-duration: 40s;

-o-animation-duration: 40s;

animation-duration: 40s;

}

.ground p {

background-repeat: no-repeat;

-webkit-animation-name: prop-2000;

-moz-animation-name: prop-2000;

-ms-animation-name: prop-2000;

-o-animation-name: prop-2000;

animation-name: prop-2000;

}

.sign-all-css {

width: 160px; height: 188px;

top: 325px; left: 1600px;

background-image: url(images/signs/all-css.png);

-webkit-animation-duration: 35s;

-moz-animation-duration: 35s;

-ms-animation-duration: 35s;

-o-animation-duration: 35s;

animation-duration: 35s;

}

.sign-lots-of-ps {

width: 102px; height: 120px;

top: 345px; left: 1150px;

background-image: url(images/signs/lots-of-ps.png);

-webkit-animation-duration: 56s;

-moz-animation-duration: 56s;

-ms-animation-duration: 56s;

-o-animation-duration: 56s;

animation-duration: 56s;

}

.sign-no-js {

width: 65px; height: 77px;

top: 348px; left: 1150px;

background-image: url(images/signs/no-js.png);

-webkit-animation-duration: 71s;

-moz-animation-duration: 71s;

-ms-animation-duration: 71s;

-o-animation-duration: 71s;

animation-duration: 71s;

}

.sign-best {

width: 43px; height: 50px;

top: 350px; left: 1000px;

background-image: url(images/signs/best.png);

-webkit-animation-duration: 95s;

-moz-animation-duration: 95s;

-ms-animation-duration: 95s;

-o-animation-duration: 95s;

animation-duration: 95s;

}

CSS动画相关代码@-webkit-keyframes me {

0% { -webkit-transform: rotate(5deg) translate( 5px, 0px); }

25% { -webkit-transform: rotate(5deg) translate(-5px, -14px); }

50% { -webkit-transform: rotate(5deg) translate( 5px, 0px); }

75% { -webkit-transform: rotate(5deg) translate(-5px, -14px); }

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

}

@-webkit-keyframes right-bicep {

0% { -webkit-transform: rotate(26deg); }

50% { -webkit-transform: rotate(-20deg); }

100% { -webkit-transform: rotate(26deg); }

}

@-webkit-keyframes left-bicep {

0% { -webkit-transform: rotate(-20deg); }

50% { -webkit-transform: rotate(26deg); }

100% { -webkit-transform: rotate(-20deg); }

}

@-webkit-keyframes right-forearm {

0% { -webkit-transform: rotate(-10deg); }

50% { -webkit-transform: rotate(-45deg); }

100% { -webkit-transform: rotate(-10deg); }

}

@-webkit-keyframes left-forearm {

0% { -webkit-transform: rotate(-45deg); }

50% { -webkit-transform: rotate(-10deg); }

100% { -webkit-transform: rotate(-45deg); }

}

@-webkit-keyframes right-thigh {

0% { -webkit-transform: rotate(-45deg); }

50% { -webkit-transform: rotate(10deg); }

100% { -webkit-transform: rotate(-45deg); }

}

@-webkit-keyframes left-thigh {

0% { -webkit-transform: rotate(10deg); }

50% { -webkit-transform: rotate(-45deg); }

100% { -webkit-transform: rotate(10deg); }

}

@-webkit-keyframes right-shin {

0% { -webkit-transform: rotate(30deg); }

25% { -webkit-transform: rotate(20deg); }

50% { -webkit-transform: rotate(20deg); }

75% { -webkit-transform: rotate(85deg); }

100% { -webkit-transform: rotate(30deg); }

}

@-webkit-keyframes left-shin {

0% { -webkit-transform: rotate(20deg); }

25% { -webkit-transform: rotate(85deg); }

50% { -webkit-transform: rotate(30deg); }

75% { -webkit-transform: rotate(20deg); }

100% { -webkit-transform: rotate(20deg); }

}

@-webkit-keyframes right-foot {

0% { -webkit-transform: rotate(-5deg); }

25% { -webkit-transform: rotate(-7deg); }

50% { -webkit-transform: rotate(-16deg); }

75% { -webkit-transform: rotate(-10deg); }

100% { -webkit-transform: rotate(-5deg); }

}

@-webkit-keyframes left-foot {

0% { -webkit-transform: rotate(-16deg); }

25% { -webkit-transform: rotate(-10deg); }

50% { -webkit-transform: rotate(-5deg); }

75% { -webkit-transform: rotate(-7deg); }

100% { -webkit-transform: rotate(-16deg); }

}

@-webkit-keyframes right-toes {

0% { -webkit-transform: rotate(0deg); }

25% { -webkit-transform: rotate(-10deg); }

50% { -webkit-transform: rotate(-10deg); }

75% { -webkit-transform: rotate(-25deg); }

100% { -webkit-transform: rotate(0deg); }

}

@-webkit-keyframes left-toes {

0% { -webkit-transform: rotate(-10deg); }

25% { -webkit-transform: rotate(-25deg); }

50% { -webkit-transform: rotate(0deg); }

75% { -webkit-transform: rotate(-10deg); }

100% { -webkit-transform: rotate(-10deg); }

}

@-webkit-keyframes shadow {

0% { opacity: 1; }

25% { opacity: 0.75; }

50% { opacity: 1; }

75% { opacity: 0.75; }

100% { opacity: 1; }

}

@-webkit-keyframes prop-600 {

0% { -webkit-transform: translateX(0px); }

100% { -webkit-transform: translateX(-600px); }

}

@-webkit-keyframes prop-1200 {

0% { -webkit-transform: translateX(0px); }

100% { -webkit-transform: translateX(-1200px); }

}

@-webkit-keyframes prop-2000 {

0% { -webkit-transform: translateX(0px); }

100% { -webkit-transform: translateX(-2000px); }

}

十三金
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS动画——行走的小人
流楚丶格念的博客
07-15 3558
展示 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <li
java人物行走
01-06
通过键盘控制精灵在场景动画中行走，背景动画移动让人感觉好像精灵在行走
php人物行走,非常震撼的纯CSS3人物行走动画
weixin_33897367的博客
03-16 61
#canvas{height:600px;width:760px;margin:0;padding:0;position:relative;overflow:hidden;}#canvasdiv{position:absolute;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infin...
css实现人走路效果,如何使用纯CSS实现一个人独自行走的动画效果（附源码）
weixin_31508009的博客
08-04 1016
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个人独自行走的动画效果(附源码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。效果预览源代码下载https://github.com/comehope/front-end-daily-challenges代码解读定义 dom，容器中包含 3 个元素，分别代表头、身体和脚：居中显示：body {margin: 0;height: ...
行走的代码
runningcode的博客
08-02 309
从新开始，加油
西游记四个小人物走动,css3的知识 有兴趣的童鞋参考.rar
10-21
css3中的动画特性，形成人物走动特效,感兴趣的童鞋可以学下,很简单的
JavaScript实现的使用键盘控制人物走动实例
10-25
主要介绍了JavaScript实现的使用键盘控制人物走动实例,也可说是一个JS实现的小人走动小游戏,需要的朋友可以参考下
js+css3实现扁平化时钟走动动画效果
09-13
在本文中，我们将深入探讨如何使用JavaScript（JS）和CSS3技术来实现一个扁平化的时钟走动动画效果。这种效果通常用于增强网站的用户体验，提供实时的时间信息，并且可以作为网页设计中的一个视觉焦点。 首先，让...
HTML5+CSS3可爱卡通人物奔跑动画效果
06-11
在这个例子中，CSS3的`@keyframes`规则用于定义动画的各个阶段，使得卡通人物能够有流畅的跑步动作。此外，CSS3的`transform`属性可能被用来改变元素的位置、大小和旋转，从而实现动画效果。同时，背景的动态效果也...
纯css3清新风格的圆形立体时钟走动样式代码
11-10
4. **CSS3动画（animation）**：为了模拟时钟的实时走动，我们可以定义关键帧动画。使用`@keyframes`规则定义了从一个状态到另一个状态的变换过程，然后通过`animation`属性应用到元素上，设置动画的持续时间、延迟...
html5人物行走
07-30
html5人物行走 键盘上下左右控制人物移动。 讲解网址 http://blog.csdn.net/foreverkoking/article/details/9474603
AS 一个人物行走的原代码
twtmnm1314
05-06 192
http://bbs.actionscript3.cn/thread-4854-1-1.html     我找到一个人物行走的原代码,作者实现的方式是有一个PNG的图片,图片上有好多人物行走的单个图,背景颜色是白色,然后用代码来实现按某个键向哪个方向走,图片如下 ...
人物行走
moonlight201868的博客
07-26 306
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .box{ width:
css实现人走路效果,CSS3做动物走路效果
weixin_35890852的博客
08-04 345
CSS3做动物走路效果采用的CSS3切换序列帧做核心代码如下.game .role {width: 60px;height: 86px;position: absolute;top: -83px;background-image: url(../images/role5.png);background-repeat: no-repeat}.roleRunAm {-webkit-animation-...
c语言--行走的代码
wyczgnq的博客
09-07 657
那我们试着通过while循环并结合清屏幕命令system("cls")完成一个行走的金字塔会是怎样，既然已经基本掌握了printf输出，那么我们是否也可以尝试通过代码使得输出的内容。首先我们利用printf("A")摆出金字塔造型。
php人物走动,pygame制作游戏人物精灵的行走及二段跳实现方法
weixin_30735701的博客
03-13 530
不得不承认《Python游戏编程入门》这本书翻译、排版非常之烂，但是里面的demo还是很好的，之前做了些改编放到这里。先是素材：背景精灵所有素材均取自此书接下来就是精灵类的创建了：(self)self.master_image === -1= 1= 1=== 1============rect == (rect.width // width) * (rect.height // height) -...
JS编写人物行走动画
天飓的技术博客
03-02 1709
首先找一张人物行走的分解图，然后，将这张图作为背景，通过background-position来定位某一个分解动作。这个操作通过CSS定义就可实现，代码如下： .ai_girl{ position:absolute; top:50px; left:10px; width:64; height:64; background-image:url(image/girl.gif); backgroun...
php人物走动,js如何利用键盘事件实现人物行走
weixin_35615010的博客
03-13 131
使用的图：效果图：实例代码：Titlehtml{background-color: deepskyblue;}div{width: 32px;height: 32px;background-image: url("img/Actor01-Braver03.png");position: absolute;}var key=0;var bool=false;var speed=2;//每次行走的距离...
css3动画实现脚印走动
最新发布
05-13
可以通过CSS3的动画实现脚印走动的效果。首先，你需要准备好脚印的图片，然后利用CSS3的@keyframes规则定义动画的关键帧，最后将动画应用到脚印图片上即可。 以下是实现脚印走动的CSS代码示例： ```css /* 定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值