前端的学习之路：初级CSS---动画(练习2)

最新推荐文章于 2023-12-15 13:40:03 发布

new-SkyWaller

最新推荐文章于 2023-12-15 13:40:03 发布

阅读量107

点赞数

分类专栏：初级CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_44647555/article/details/113782847

版权

初级CSS 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

动画(练习2)

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>动画(练习2)</title>
        <!-- <link rel="stylesheet" href="../chujicss/css/11.27.07.css"> -->
		<style type="text/css">
			.box {
				width: 96px;
				height: 96px;
				margin: 0 auto;
				background-image: url(./chujicss\ img/11.27.07.jpg);
				animation: run 10s steps(1) infinite;
				
			}

			@keyframes run {
				0% {
					background-position: 0 0
				}

				5% {
					background-position: -100% 0
				}

				10% {
					background-position: -200% 0
				}

				15% {
					background-position: -300% 0
				}

				20% {
					background-position: -400% 0
				}

				25% {
					background-position: 0 -100%
				}

				30% {
					background-position: -100% -100%
				}

				35% {
					background-position: -200% -100%
				}

				40% {
					background-position: -300% -100%
				}

				45% {
					background-position: -400% -100%
				}

				50% {
					background-position: 0 -200%
				}

				55% {
					background-position: -100% -200%
				}

				60% {
					background-position: -200% -200%
				}

				65% {
					background-position: -300% -200%
				}

				70% {
					background-position: -400% -200%
				}

				75% {
					background-position: 0 -300%
				}

				80% {
					background-position: -100% -300%
				}

				85% {
					background-position: -200% -300%
				}

				90% {
					background-position: -300% -300%
				}

				95% {
					background-position: -400% -300%
				}

				100% {
					background-position: 0 0
				}
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

运行结果为：
在这里插入图片描述
代码引用的图片是：

new-SkyWaller

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端的学习之路：初级CSS---动画(练习2)

动画(练习2)<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title
复制链接

扫一扫