利用 CSS 实现摆锤效果
利用 css
的 rotate
animation
即可实现简单的摆锤效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#line {
height: 1px;
width: 200px;
background-color: pink;
/* 将直线顺时针旋转 45度 */
transform: rotate(45deg);
/* 动画 */
animation:mymove 5s infinite;
}
@keyframes mymove {
0% {transform: rotate(45deg);}
50% {transform: rotate(135deg);}
100% {transform: rotate(45deg);}
}
#qian {
/* 用白色的背景将直线的前半部分遮盖住 */
width: 100px;
height: 8px;
float: left;
background-color: #fff;
}
#dian {
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
float: right;
margin-top: -4px;
}
</style>
</head>
<body>
<div id="line">
<span id="qian"></span>
<div id="dian"></div>
</div>
</body>
</html>