loading效果实例

CSS动画实例

最新推荐文章于 2021-10-25 11:44:33 发布

转载最新推荐文章于 2021-10-25 11:44:33 发布 · 112 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mingjixiaohui/p/5388607.html

本文通过两个实例展示了如何使用CSS实现加载动画效果。第一个实例利用多个并排的矩形块通过动画实现伸缩效果；第二个实例则演示了内外两个圆形边框旋转的动画效果。通过这两个例子，读者可以了解到如何运用CSS属性如animation、transform等来制作简单的网页加载动画。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			.load1{
				width: 300px;
				height: 50px;
				margin: 100px auto 0;
				
			}
			.load1 li{
				width: 10px;
				height: 50px;
				background: red;
				float: left;
				margin-right: 20px;
				transform: scaleY(0.2);
				/*animation:move1 1s ease infinite alternate  ;*/
			}
			@-webkit-keyframes move1{
				0%{
					transform: scaleY(0.2);
				}
				100%{
					transform: scaleY(2);
				}
			}
			
			.load2{
				position:relative;
				margin:100px auto 0;
				width:50px;
				height:50px;
				trans
			}
			.load2 .bigCircle{
				position: absolute;
				left: 0;
				top: 0;
				width: 40px;
				height: 40px;
				border: 5px solid transparent;
				border-left: 5px solid purple;
				border-top: 5px solid purple;
				border-radius: 50%;
				transform: rotate(0deg);
			}
			.load2 .smallCircle{
				position: absolute;
				left:0;
				top:0;
				right:0;
				bottom:0;
				margin:auto;
				width: 30px;
				height: 30px;
				border: 5px solid transparent;
				border-right: 5px solid yellow;
				border-bottom: 5px solid yellow;
				border-radius: 50%;
				transform: rotate(0deg);
				/*animation: rotate 2s ease;*/
			}
			@-webkit-keyframes rotate{
				from{transform:rotate(0deg);}
				to{transform:rotate(360deg);}
			}
		</style>
	</head>
	<body>
		<div class="load1">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		
		<div class="load2">
			<div class="bigCircle"></div>
			<div class="smallCircle"></div>
		</div>
		
		<script>
			var aLi = document.getElementsByTagName("li");
			var oLoad2 = document.getElementsByClassName("load2");
			var bCircle = document.getElementsByClassName("bigCircle")[0];
			console.log(bCircle)
			var sCircle = document.getElementsByClassName("smallCircle")[0];

			for(var i = 0 ; i < aLi.length;i++)
			{
				aLi[i].style.webkitAnimation = "move1 1.1s "+i*0.3+"s ease infinite alternate";
			}
			
			bCircle.style.webkitAnimation = "rotate 2s";
			bCircle.addEventListener("webkitAnimationEnd",function(){
				bCircle.style.webkitAnimation = "";
				sCircle.style.webkitAnimation = "rotate 0.5s";
			},false)
			
			sCircle.addEventListener("webkitAnimationEnd",function(){
				sCircle.style.webkitAnimation = "";
				bCircle.style.webkitAnimation = "rotate 0.5s";
			})
		</script>
	</body>
</html>

转载于:https://www.cnblogs.com/mingjixiaohui/p/5388607.html