能量守恒–摆动的小球

运用 transform-origin 属性 更简单、真实

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>能量守恒---摆动的小球</title>
	<style type="text/css">
		* {
			margin:0px;
			padding:0px;
		}
		.box {
			width:1000px;
			height:500px;
			border:1px solid #fff;
			margin:30px auto;
		}
		.support {
			width:655px;
			height:450px;
			margin:15px auto;
			position:relative;
			padding:0px 100px;
			background:#000;
			border-top:20px solid #dcdcdc;
			border-radius:15px;
			overflow:hidden;
		}
		.support > div {
			display:block;
			width:130px;
			height:400px;
			float:left;
			position:relative;
			transform-origin:50% 0%;
			-moz-transform-origin:50% 0%;
			-ms-transform-origin:50% 0%;
			-o-transform-origin:50% 0%;
			-webkit-transform-origin:50% 0%;
		}
		/* 连接点 */
		.support > div .spot {
			width:16px;
			height:16px;
			border-radius:100%;
			background:#dcdcdc;
			box-shadow:0 0 8px 1px rgba(120,120,120,1) inset,
				0 0 12px 0 rgba(236,236,236,1);
			position:absolute;
			top:-8px;
			left:57px;
			z-index:5;
		}
		/* 线 */
		.support > div .linellae {
			width:0px;
			height:280px;
			border-left:2px solid #dcdcdc;
			margin:0px auto;
			position:relative;
			z-index:3;
		}
		/* 球 */
		.support > div .ball {
			width:128px;
			height:128px;
			background:#dcdcdc;
			border-radius:100%;
			position:absolute;
			bottom:0px;
			left:0px;
			z-index:2;
			box-shadow:0 10px 75px 5px rgba(0,0,0,1) inset,
					0 5px 35px 0 rgba(236,236,236,1);
		}
		/* 第一个 */
		.support .first {
			animation:firstall 1.2s linear infinite;
			-moz-animation:firstall 1.2s linear infinite;
			-webkit-animation:firstall 1.2s linear infinite;
			-o-animation:firstall 1.2s linear infinite;
		}
		@keyframes firstall {
			0% {transform:rotate(0deg);-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);}
			25% {transform:rotate(15deg);-ms-transform:rotate(15deg);-moz-transform:rotate(15deg);-webkit-transform:rotate(15deg);-o-transform:rotate(15deg);}
			50% {transform:rotate(0deg);-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);}
			100% {transform:rotate(0deg);-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);}
		}
		/* 最后一个 */
		.support .last {
			animation:lastall 1.2s linear infinite;
			-moz-animation:lastall 1.2s linear infinite;
			-webkit-animation:lastall 1.2s linear infinite;
			-o-animation:lastall 1.2s linear infinite;
		}
		@keyframes lastall {
			0% {transform:rotate(0deg);-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);}
			50% {transform:rotate(0deg);-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);}
			75% {transform:rotate(-15deg);-ms-transform:rotate(-15deg);-moz-transform:rotate(-15deg);-webkit-transform:rotate(-15deg);-o-transform:rotate(-15deg);}
			100% {transform:rotate(0deg);-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);}
		}
		/* 中间三个 */
		.support .other {
			animation:otherall 1.2s linear 0.6s infinite;
			-moz-animation:otherall 1.2s linear 0.6s infinite;
			-webkit-animation:otherall 1.2s linear 0.6s infinite;
			-o-animation:otherall 1.2s linear 0.6s infinite;
		}
		@keyframes otherall {
			0% {transform:rotate(0deg);-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);}
			25% {transform:rotate(-2deg);-ms-transform:rotate(-2deg);-moz-transform:rotate(-2deg);-webkit-transform:rotate(-2deg);-o-transform:rotate(-2deg);}
			50% {transform:rotate(0deg);-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);}
			75% {transform:rotate(2deg);-ms-transform:rotate(2deg);-moz-transform:rotate(2deg);-webkit-transform:rotate(2deg);-o-transform:rotate(2deg);}
			100% {transform:rotate(0deg);-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);}
		}

	</style>
</head>
<body>
	<div class="box">
		<div class="support">
			<!-- 第一个 -->
			<div class="first">
				<div class="spot"></div><!-- 连接点 -->
				<div class="linellae"></div><!-- 线 -->
				<div class="ball"></div><!-- 球 -->
			</div>
			<!-- 中间三个 -->
			<div class="other">
				<div class="spot"></div>
				<div class="linellae"></div>
				<div class="ball"></div>
			</div>
			<div class="other">
				<div class="spot"></div>
				<div class="linellae"></div>
				<div class="ball"></div>
			</div>
			<div class="other">
				<div class="spot"></div>
				<div class="linellae"></div>
				<div class="ball"></div>
			</div>
			<!-- 最后一个 -->
			<div class="last">
				<div class="spot"></div>
				<div class="linellae"></div>
				<div class="ball"></div>
			</div>
		</div>
	</div>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 能量守恒–摆动的小球

赞 (0)
分享到:更多 ()

发表评论 0