transition\animation动画

最新推荐文章于 2022-07-30 14:41:09 发布

ly_zioyne

最新推荐文章于 2022-07-30 14:41:09 发布

阅读量221

点赞数

本文链接：https://blog.csdn.net/ly_zioyne/article/details/53766882

版权

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<style>
	body{background: #000;}
	.menu{width: 200px;height: 200px;border:15px solid red;border-radius: 50%;
	border-bottom:15px solid #fff;border-left:15px solid #fff;margin:200px auto;
	animation:aa 2s linear infinite;}
	@keyframes aa{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(360deg);}
	}


	</style>
	</head>
	<body>
	<div class="menu"></div>
	</body>
	</html>

进度条：

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	body,span{margin:0px;padding: 0px;}
	.menu{width: 300px;height: 300px;border: 1px solid red;margin:200px auto;}

	.menu span{display:block;width:5px;height:45px;background:red;border: 1px solid red;margin-right: 10px;
	float: left;margin-top:123px;}
	.menu span:first-child{margin-left:100px;}
	.menu span:nth-child(1){animation:aa 0.8s 0.2s infinite;}
	.menu span:nth-child(2){animation:aa 0.8s 0.4s infinite;}
	.menu span:nth-child(3){animation:aa 0.8s 0.6s infinite;}
	.menu span:nth-child(4){animation:aa 0.8s 0.8s infinite;}
	.menu span:nth-child(5){animation:aa 0.8s 1.0s infinite;}
	.menu span:nth-child(6){animation:aa 0.8s 1.2s infinite;}


	@keyframes aa{
	0%{transform: scaleY(1);}
	50%{transform: scaleY(0.3);}
	100%{transform: scaleY(1)}
	}

	</style>
	</head>
	<body>
	<div class="menu">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	</div>
	</body>
	</html>

关注