CSS等待动画脉冲

最新推荐文章于 2024-07-24 10:22:02 发布

xiaohaizi15

最新推荐文章于 2024-07-24 10:22:02 发布

阅读量265

点赞数

文章标签： css3 html

本文链接：https://blog.csdn.net/xiaohaizi15/article/details/107461433

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		 @keyframes loadingAnimate{
				0%{
					transform: scale(.1);
					opacity: 0;
				}
				50%{
					transform: scale(1);
					opacity: 1;
				}
				100%{
					transform: scale(.1);
					opacity: 0;
				}
			} 
			.loading-box{
				
				width: 120px;
				height: 30px;
				margin: 100px auto 0px;
			}
			.loading-box span{
				width: 300px;
				height: 300px;
				float: left;
				margin: 0px 5px;
				border-radius: 15px;
				background: blue;
			animation: loadingAnimate 1s ease infinite;
				transform: scale(.1);
				opacity: 0; 
			}
			 .loading-box span:nth-of-type(1){
				animation-delay: 0s;
			}
			.loading-box span:nth-of-type(2){
				animation-delay: .15s;
			}
			.loading-box span:nth-of-type(3){
				animation-delay: .3s;
			} 
		</style>
	</head>
	<body>
		<div class="loading-box">
			<span></span>
			<span></span>
			<span></span>
		</div>
	</body>
</html>

浮动元素只要浮动就会变块元素

1 @Keyframes 关键帧：类似于Flash中的关键帧。它能在整个动画过程中，设置不同的时间段，并给每个时间段设置不同的样式。
2 transform: scale(.1);变小0.1倍
3 border-radius: 15px; 以15px半径画圆
4 loading-box span:nth-of-type(1) 第一个元素高级选择器