用css实现简单的动画——“奔跑的小子”（有知识梳理和图片）

学徒在修行

已于 2022-09-03 19:20:40 修改

阅读量1.1k

点赞数 4

文章标签： css 动画 css3

于 2022-09-03 00:01:33 首次发布

本文链接：https://blog.csdn.net/m0_53394907/article/details/126671576

版权

一、实现效果

效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>csstext</title>
		<style>
			.box{
				height: 70px;
				width: 55px;
				background-image: url(../奔跑的小子.jpg);
				margin: 90px auto;
			animation: run 1s steps(8) infinite alternate;
			}
			
			@keyframes run{
				from{
					background-position: 0 0;
				}
				to{
					background-position: -474px 0;
					
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			
		</div>
	</body>
</html>

二、让人物动起来，而不是原地踏步

1、代码改动

@keyframes run{
				from{
					background-position: 0 0;
					margin: 90px 0;
				}
				to{
					background-position: -474px 0;
					margin-left: 300px;
				}

2、效果图

其实就通过margin-left实现的，我真是个小机灵鬼！嘿嘿。

三、知识梳理

1、关键帧的设置

格式

@keyframe run{//定义加动画效果的名字，类似与int a(),这种函数定义。
from{
//开始的位置
}
to{
//结束的位置
}
}

2、animation的一些属性

animation-name//需要使用的动画效果名字；
-animation-duration//动画效果持续的时间；
animation-timing-function//动画执行的速度，有下列子属性：
animation-delay//动画效果延迟的；
animation-iteration-count//动画执行的次数，可以用阿拉伯，和infinite（无穷）;
animation-direction//动画运行的方向：
animation-paly-state//动画运行状态