首页 > 开发 > CSS > 正文

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

2024-07-11 08:33:18

字体：大中小

来源：转载

供稿：网友

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

HTML代码

XML/HTML Code复制内容到剪贴板

<div id="canvas"> <div class="sky">
<div class="cloud-1"></div> <div class="cloud-2"></div>
<div class="cloud-3"></div> <div class="cloud-4"></div>
<div class="cloud-5"></div> <div class="cloud-6"></div>
<div class="cloud-7"></div> <div class="cloud-8"></div>
</div> <div class="horizon"></div>
<div class="ground"> <div class="sign-best"></div>
<div class="sign-no-js"></div> <div class="sign-lots-of-divs"></div>
<div class="sign-all-css"></div> </div>
<div class="shadow"></div>
<div class="me">
<div class="torso"> <div class="left leg">
<div class="left thigh"> <div class="left shin">
<div class="left foot"> <div class="left toes"></div>
</div> </div>
</div> </div>
<div class="right leg"> <div class="right thigh">
<div class="right shin"> <div class="right foot">
<div class="right toes"></div> </div>
</div> </div>
</div>
<div class="left arm">
<div class="left bicep"> <div class="left forearm"></div>
</div> </div>
<div class="right arm"> <div class="right bicep">
<div class="right forearm"></div> </div>
</div>
</div>
</div>
<div class="overlay"></div> </div>

上一篇：CSS“隐藏”元素的多种方法的对比

下一篇：简单总结CSS3中视窗单位Viewport的常见用法

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注