前端ABC运用 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 » 能量守恒–摆动的小球