每天一个jquery插件-地球绕太阳
地球绕太阳
今天太累了，但是还是做点东西水一下
效果如下
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>地球绕太阳</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
user-select: none;
}
#box{
height: 600px;
width: 600px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
#sun{
position: absolute;
background-image: url(img/太阳.png);
width: 100px;
height: 100px;
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
animation:zhuan 10s linear infinite;
}
#earth{
position: absolute;
background-image: url(img/地球.png);
width: 100%;
height: 100px;
background-size: 100px 100px;
background-repeat: no-repeat;
animation:zhuan 10s linear infinite;
}
@keyframes zhuan{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="box">
<div id="sun"></div>
<div id="earth"></div>
</div>
</body>
</html>
思路解释
- 没思路，┗|｀O′|┛ 嗷~~