使用CSS实现左右30度的摆钟
2019-03-17 本文已影响0人
原来如此scater
利用只是点：animation、transform、transform-origin，摆动位置统一，就会实现同角度摆动。
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width:300px;
height:300px;
border: 1px solid rgba(0, 140, 255, 0.623);
position: relative;
}
.center-circle{
width:20px;
height:20px;
background-color:rgb(216, 166, 28);
border-radius: 10px;
position: absolute;
top:0;
left:0;
bottom: 0;
right: 0;
margin: auto;
}
.plate-circle{
width:48px;
height:48px;
border-radius: 50%;
background-color: rgb(216, 166, 28);
position: absolute;
top:276px;
left:126px;
animation: pendulum-animation 4s linear infinite;
/*
transform-origin改变被转换元素的位置，默认值：50% 50% 0
将摆盘的转换位置定位与center-circle的中心的重合
*/
transform-origin: 50% -127px;
}
.connecting-line{
width:4px;
height:150px;
background-color: rgb(216, 166, 28);
position:absolute;
top: 50%;
left: 148px;
animation: pendulum-animation 4s linear infinite;
/*将摆盘的转换位置定位与center-circle的中心的重合*/
transform-origin: 50% 0;
}
@keyframes pendulum-animation{
0% {transform: rotate(0deg);}
25% {transform:rotate(-30deg)}
50% {transform: rotate(0deg);}
75% {transform: rotate(30deg);}
100% {transform: rotate(0deg);}
}
</style>
</head>
<body>
<div id = "box">
<!-- 摆动中心点 -->
<div class="center-circle"></div>
<!-- 摆钟连接线 -->
<div class="connecting-line"></div>
<!-- 摆盘 -->
<div class="plate-circle"></div>
</div>
</body>
</html>
