CSS动画的练习案列

最新推荐文章于 2023-03-16 20:18:11 发布

Stirve unremitting

最新推荐文章于 2023-03-16 20:18:11 发布

阅读量371

点赞数

分类专栏：笔记文章标签： css3 css

本文链接：https://blog.csdn.net/weixin_46421045/article/details/104870513

版权

笔记专栏收录该内容

96 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;height: 0;}
			.con1{width: 116px;height:194px;background: slategray;margin: 200px;}
			
			.con1 .c1{background: url('img/img2/charector.png')/*no-repeat*/ 0px 0px;width: 116px;height: 194px;animation: dh  1.5s linear infinite /*reverse */;animation-timing-function:/*这个冒号没看出来么？*/step-start;}
			
			@keyframes dh{
				0%{background-position:-37px -19px;
				}
				14%{ background-position:-224px -44px;
				 }
				28%{ background-position:-401px -66px;
				}
				42%{background-position: -582px -41px;
				 }
				56%{background-position: -762px -17px;
				 }
				70%{ background-position:-944px -65px;
				}
				84%{background-position:-1118px -44px;
				 }
				100%{background-position:-38px -14px;
				 }
			}
		</style>
	</head>
	<body>
		<div class="con1">
			<div class="c1"></div>						
		</div>
	</body>
</html>

Stirve unremitting

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS动画的练习案列

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;height: 0;} .con1{width: 116px;height:19...
复制链接

扫一扫