css动画逐帧播放、缩放

最新推荐文章于 2024-04-16 16:54:25 发布

月疯

最新推荐文章于 2024-04-16 16:54:25 发布

阅读量237

点赞数

分类专栏：【HTML5】

本文链接：https://blog.csdn.net/chehec2010/article/details/119568989

版权

【HTML5】专栏收录该内容

45 篇文章 6 订阅

订阅专栏

百度直接搜索：animation.css 库，专门是写好的css动画库

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/animation.css"/>
	    <style type="text/css">
	    	section{
				width: 300px;
				height: 200px;
				background: orange;
			}
			section:hover{
				animation: rubberBand;
			}
	    </style>
	</head>
	<body>
		<section></section>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			section{
				width: 180px;
				height: 300px;
				background: url(img/cs.png) no-repeat;
				margin: 100px auto;
				/* step-start没有过度，每次跳到关键帧 */
				animation: runImg 0.6s step-start infinite;
			}
			@keyframes runImg{
				0%{
					background-position: 0 0;
				}
				14.3{
					background-position: -180px 0;
				}
				28.6%{
					background-position: -360px 0;
				}
				42.9%{
					background-position: -540px 0;
				}
				57.2%{
					background-position: -720px 0;
				}
				71.5%{
					background-position: -900px 0;
				}
				85.8%{
					background-position: -1080px 0;
				}
				100%{
					background-position: 0 0;
				}
			}
		</style>
	</head>
	<body>
		<section>
			
		</section>
	</body>
</html>

缩放：小例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			section{
				width: 100px;
				height: 100px;
				background: #ccc;
				margin: 100px auto;
				position: relative;
				}
			div{
				width: 80px;
				height: 80px;
				border: 3px solid red;
				position: absolute;
				border-radius: 50px;
				transform: scale(0);
				opacity: 0;
			}
			div:nth-child(1){
				animation: scaleDiv 5s linear infinite;
			}
			/* 名称、播放时长、延迟、动画播放属性、循环永久 */
			div:nth-child(2){
				animation: scaleDiv 5s 1s linear infinite;
			}
			div:nth-child(3){
				animation: scaleDiv 5s 2s linear infinite;
			}
			div:nth-child(4){
				animation: scaleDiv 5s 3s linear infinite;
			}
			div:nth-child(5){
				animation: scaleDiv 5s 4s linear infinite;
			}
			@keyframes scaleDiv{
				0%{
					transform: scale(0);
					opacity: 0;
				}
				25%{
					transform: scale(0.5);
					opacity: 0.5;
				}
				50%{
					transform: scale(1);
					opacity: 0.5;
				}
				70%{
					transform: scale(1.5);
					opacity: 0.5;
				}
				100%{
					transform: scale(2);
					opacity: 0;
				}
			}
		</style>
	</head>
	<body>
		<section>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</section>
	</body>
</html>