利用css动画实现小僵尸运动

3AM_

于 2022-07-29 11:11:55 发布

阅读量161

点赞数

文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/weixin_54139195/article/details/126051765

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.one {
				width: 200px;
				margin: 0 auto;
			}

			.two {
				width: 200px;
				/* border: 1px solid red; */
				overflow: hidden;
			}

			.box {
				width: 200px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				font-size: 25px;
				font-weight: 600;
			}

			.two img {
				animation: mybox 1s steps(10) infinite;
			}

			@keyframes mybox {
				0% {
					transform: translateX(0);
				}

				100% {
					transform: translateX(-2000px);
				}
			}
		</style>
	</head>
	<body>
		<div class="one">
			<div class="box">
				<h3>HTML css</h3>
			</div>
			<div class="two">
				<img src="img/walkingdead.png" alt="">
			</div>
		</div>
	</body>
</html>