CSS3动画之奔跑的小熊熊案例

鹿其其鹿

于 2022-09-17 13:22:15 发布

阅读量274

点赞数

分类专栏： Web案例文章标签： css3 css 前端

本文链接：https://blog.csdn.net/qq_45478564/article/details/126904299

版权

Web案例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		.back{
			position: relative;
			margin: 300px auto;
			width: 100%;
			height: 400px;
			background: url("back.png") no-repeat;
			animation: back 8s linear infinite;
		}
		.bear{
			position: absolute;
			top:200px;
			width: 200px;
			height: 100px;
			background: url("bear.png") no-repeat;
			animation: bear 1s steps(8) infinite,move 3s forwards;
		}
		/*背景*/
		@keyframes back {
			0%{
				background-position: 0 0;
			}
			100%{
				background-position: 100% 0;
			}
		}
		/*第二段-熊*/
		@keyframes bear {
			0%{
			
			}
			100%{
				background-position: -1600px 0px;
			}
		}
		/*熊-第一段*/
		@keyframes move {
			0%{
				left: 0;
			}
			100%{
				left:50%;
				transform: translate(-50%);
			}
		}
	</style>
</head>
<body>
	<div class="back">
		<div class="bear"></div>
	</div>
</body>
</html>

图片在这里：
在这里插入图片描述