css实现人走路效果,纯css实现机器人走路动画
纯css实现机器人走路动画
由于发现了css的这个现象
当一个有元素嵌套的时候，父元素有动画，子元素也有动画，那么子元素的运动会相对父元素的运动而运动
所以我忽然想到，实现人的走路动画并不是不可能的了。
我开始搭建人体的结构，让人的每一个发生运动了的部分都设置为一个单独的盒子。
然后编辑和调整动画代码，一边站起来自己比划动作比对一边写代码。
终于，今天，大二，我实现了小学时候想用flash做出人体走路动画。
然后我开始又继续添加东西，把这个人改成了拿着剑一边挥舞一边走路的机器人。
蛮有趣的，就是代码写的比较冗长。
效果图展示
walk.gif
2021-7-15_16-35-34.png
完整源代码
一个机器人走路动画
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 头部动画 */
@keyframes head {
/*transform: translateY(-80px);*/
25% {
transform: translateY(-5px) translateX(-5px);
}
50% {
transform: translateY(-0px) translateX(0);
}
75% {
transform: translateY(-5px) translateX(5px);
}
}
/* 眼部闪光动画 */
@keyframes eyeAni {
25% {
box-shadow: black 0 0 20px;
background-color: blue;
}
50% {
}
75% {
box-shadow: black 0 0 20px;
background-color: red;
}
}
/* 身体上下动画 */
@keyframes bodyUpDown {
25% {
transform: translateY(-10px);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(-10px);
}
}
/* 大臂1动画 */
@keyframes rootArm1 {
25% {
transform: translateY(20px) rotate(0deg);
}
50% {
transform: translateY(20px) rotate(30deg);
}
75% {
transform: translateY(20px) rotate(0deg);
}
}
/* 大臂2动画 */
@keyframes rootArm2 {
25% {
transform: translateY(20px) rotate(0deg);
}
50% {
transform: translateY(20px) rotate(-30deg);
}
75% {
transform: translateY(20px) rotate(0deg);
}
}
/* 小臂1动画 */
@keyframes subArm1 {
50% {
transform: rotate(30deg);
}
}
/* 小臂2动画 */
@keyframes subArm2 {
50% {
transform: rotate(0deg);
}
}
/* 大腿1动画 */
@keyframes rootLegWalk1 {
/* 最开始 rotate(-5deg);*/
25% {
transform: rotate(-15deg);
}
50% {
transform: rotate(5deg);
}
75% {
transform: rotate(30deg);
}
}
/* 小腿1动画 */
@keyframes subLegWalk1 {
/* 最开始 transform: rotate(-10deg);*/
25% {
top: 80%;
transform: rotate(0deg);
background-color: skyblue;
}
50% {
top: 70%;
background-color: red;
transform: rotate(-30deg);
}
75% {
top: 80%;
background-color: deeppink;
transform: rotate(-15deg);
}
}
/* 大腿2动画 */
@keyframes rootLegWalk2 {
25% {
/*向前迈*/
transform: rotate(30deg);
}
50% {
/*踩下去*/
transform: rotate(5deg);
}
75% {
/*往后登*/
transform: rotate(-15deg);
}
}
/* 小腿2动画 */
@keyframes subLegWalk2 {
25% {
top: 80%;
transform: rotate(-30deg);
background-color: transparent;
}
50% {
top: 80%;
background-color: red;
transform: rotate(-5deg);
}
75% {
top: 80%;
background-color: transparent;
transform: rotate(0deg);
}
}
/* 脚丫1动画 */
@keyframes foot1 {
25% {
transform: rotate(-5deg);
}
50% {
transform: translateX(10px);
}
75% {
transform: rotate(10deg);
}
}
/* 脚丫2动画 */
@keyframes foot2 {
25% {
transform: rotate(20deg);
}
50% {
transform: translateX(10px);
}
75% {
transform: rotate(10deg);
}
}
/* 剑光动画 */
@keyframes weaponLightAni {
25% {
width: 30px;
height: 0;
}
50% {
box-shadow: pink 0 0 40px;
/*transform: translateX(10px);*/
}
75% {
box-shadow: yellow 0 0 100px;
/*transform: rotate(10deg);*/
}
}
/* 剑动画 */
@keyframes weaponAni {
50% {
transform: rotate(-360deg);
}
100% {
transform: rotate(-720deg);
}
}
.body {
width: 70px;
height: 200px;
position: relative;
left: 40%;
margin-top: 20vh;
border: solid 5px;
border-radius: 60px;
animation: bodyUpDown 2s infinite;
}
.eye {
width: 25px;
height: 10px;
position: absolute;
left: 5px;
top: 30%;
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
background-color: deeppink;
animation: eyeAni 2s infinite;
}
.head {
width: 80px;
height: 80px;
position: absolute;
border: solid 5px;
margin-left: -10px;
transform-origin: center bottom;
margin-top: -70px;
border-top-left-radius: 30px;
border-bottom-right-radius: 50px;
animation: head 2s infinite;
}
.arm1, .arm2, .arm11, .arm22, .leg1, .leg2, .leg11, .leg22, .foot1, .foot2 {
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
.arm1 {
width: 42px;
height: 160px;
border: solid 5px;
position: absolute;
transform-origin: center top;
margin-left: 10px;
transform: translateY(20px) rotate(-30deg);
animation: rootArm1 2s infinite;
}
.arm11 {
width: 90%;
height: 90%;
border: solid 3px;
top: 80%;
position: absolute;
transform-origin: center top;
transform: rotate(0deg);
animation: subArm1 2s infinite;
}
.arm2 {
width: 100px;
height: 160px;
border: solid 5px;
position: absolute;
transform-origin: center top;
margin-left: -20px;
transform: translateY(20px) rotate(30deg);
opacity: 0.3;
animation: rootArm2 2s infinite;
}
.leg1 {
width: 50px;
height: 90%;
border: solid 5px;
position: absolute;
top: 80%;
left: 40%;
transform-origin: center top;
transform: rotate(5deg);
animation: rootLegWalk1 2s infinite;
}
.arm22 {
width: 90%;
height: 90%;
border: 3px solid;
border-bottom-right-radius: 100px;
border-bottom-width: 15px;
top: 80%;
position: absolute;
transform-origin: center top;
transform: rotate(30deg);
animation: subArm2 2s infinite;
}
.leg11 {
width: 90%;
height: 90%;
border: solid 4px;
position: absolute;
top: 80%;
transform-origin: center top;
transform: rotate(-10deg);
animation: subLegWalk1 2s infinite;
}
.foot1 {
width: 80px;
height: 30px;
position: absolute;
right: 0;
bottom: -3px;
border: solid 3px;
border-top-left-radius: 40px;
transform-origin: right center;
animation: foot1 2s infinite;
}
.leg2 {
width: 50px;
height: 90%;
border: solid 5px;
position: absolute;
top: 80%;
left: 10%;
opacity: 0.3;
transform-origin: top center;
transform: rotate(-5deg);
animation: rootLegWalk2 2s infinite;
}
.leg22 {
width: 90%;
height: 90%;
border: solid 4px;
position: absolute;
top: 70%;
transform-origin: top center;
transform: rotate(-30deg);
animation: subLegWalk2 2s infinite;
}
.foot2 {
width: 80px;
height: 30px;
position: absolute;
right: 0;
bottom: -3px;
border: solid 3px;
border-top-left-radius: 40px;
animation: foot2 2s infinite;
}
.finger1, .finger2, .finger3, .finger4, .finger5 {
width: 5px;
height: 30px;
border: solid 2px;
position: absolute;
transform-origin: top center;
top: 95%;
}
.finger1 {
left: 20%;
}
.finger2 {
left: 40%;
}
.finger3 {
left: 60%;
}
.finger4 {
left: 80%;
}
.finger5 {
left: 0;
width: 10px;
height: 15px;
transform: rotate(30deg);
}
.weapon {
width: 60px;
height: 20px;
position: absolute;
right: -20px;
bottom: -20px;
border: solid 2px;
transform-origin: 20px center;
animation: weaponAni 2s infinite;
}
.light {
width: 300px;
height: 40px;
position: absolute;
right: 60px;
background-color: hotpink;
border-bottom-left-radius: 100px;
animation: weaponLightAni 2s infinite;
}
css实现人走路效果,纯css实现机器人走路动画相关推荐
- css小三角气泡效果,纯CSS实现聊天框小尖角、气泡效果
那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码: 复制代码代码如下: .arrow { width:0; height:0; font-size:0; border:solid 10px ...
- HTML制作手风琴效果,纯js+html和纯css+html制作手风琴效果，css手风琴
纯js+html和纯css+html制作手风琴效果,css手风琴 本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下 一.纯css+html的手风琴效 ...
- css如何使文字抖动,纯CSS文字彩色抖动抖音效果
效果 纯CSS文字彩色抖动抖音效果 简介 直接将这下面段放进你的 style.css doudong{ animation: uk-text-shadow-glitch .65s cubic-bezi ...
- css中间镂空,怎么用纯CSS实现镂空效果
怎么用纯CSS实现镂空效果 发布时间:2021-03-19 09:49:16 来源:亿速云 阅读:99 作者:小新 小编给大家分享一下怎么用纯CSS实现镂空效果,希望大家阅读完这篇文章之后都有所收获, ...
- css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码，本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码 本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...
- html怎么实现蓝色垂直的直线,css实例教程 一款纯css实现的垂直时间线效果
今天给大家分享一款纯css实现的垂直时间线效果.垂直时间线适合放在类似任务时间安排的网页上.该实现采用了蓝色作为主题色,界面效果还不错.一起看下效果图: 实现的代码. html代码: 复制代码代码如下 ...
- html导航凹凸效果,纯CSS实现底部弧度效果（凹凸圆弧）
相信大家再开中中都遇到过底部边为圆弧(凹凸圆弧),其它三边都正常的情况,这种图之前我都会采用图片去搞,但是身为一名开发人员(算是程序员了),应该从便曾的角度去解决问题,所以今天分享下纯css实现底部弧 ...
- android 音符动画效果,纯css实现音符跳动效果
效果如图: image.png 代码: 纯css实现音符跳动效果 .voice { display: flex; align-items: flex-end; justify-content: cen ...
- html如何实现立体效果,纯css实现立体摆放图片效果的示例代码
1.元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举个栗 ...
最新文章
- vijos 1476 旅游规划题解
- python学习干货教程(5)：#!/usr/bin/python
- 25.EXTJS 主页面的jsp
- Android RecyclerView 监听滑动
- 整合框架过程记录日志
- union-find算法分析(1)
- android自动登录实现框架,Android如何设计并且实现一个注入框架
- AXFR和IXFR区域传输及原理
- 2020流行的液态风格PNG免扣素材，竟然被我找到了！
- 查看apache版本_Apache Pulsar 2.6.1 版本正式发布：2.6.0 加强版，新增 OAuth2 支持
- linux usb全自动安装失败,关于使用universal usb installer 安装 archlinux 失败的问题
- （转）HDOJ 4006 The kth great number（优先队列）
- 计算机科学与技术导论 网站,计算机科学与技术导论
- 使用微信公众号给指定微信用户发送信息
- LMS算法实现系统识别
- Arp中间人攻击原理
- [C#]使用Process的StandardInput与StandardOutput写入读取控制台数据
- android 静态注册获取电量,获取手机电池百分比和电池容量方法
- Linux基本操作知识一
- 安迪·鲁宾支持的猫头鹰实验室刚推出了一款机器人视频会议摄像机