1
/6
打开编辑器。
2
/6
创建html文档。
3
/6
创建css文档。
4
/6
添加动画。
5
/6
加上旋转角度就会开始旋转。
6
/6
完善一下时间即可完成。
具体css代码如下:$width: 64px
$height: 64px
$dotWidth: 10px
$dotHeight: 10px
$radius: 5px
$offset: 9.37px
@function getLeft( $x ) {
@return ($width/4)*$x
}
@function getTop( $y ) {
@return ($height/4)*$y
}
@keyframes changeOpacity {
from { opacity: 1}
to { opacity: .2}
}
.q-loading {
position: fixed
top: 0
left: 0
right: 0
bottom: 0
.q-loading-overlay {
position: fixed
top: 0
left: 0
right: 0
bottom: 0
background-color: rgba(255, 255, 255, .5)
}
.q-loading-content {
position: absolute
left: 50%
top: 50%
transform: translate(-50%, -50%)
width: $width
height: $height
z-index: 2
}
.dot {
width: 10px
height: 10px
position: absolute
background-color: #0033cc
border-radius: 50% 50%
opacity: 1
animation: changeOpacity 1.04s ease infinite
}
.dot1 {
left: 0
top: 50%
margin-top: -$radius
animation-delay: 0.13s
}
.dot2 {
left: $offset
top: $offset
animation-delay: 0.26s
}
.dot3 {
left: 50%
top: 0
margin-left: -$radius
animation-delay: 0.39s
}
.dot4 {
top: $offset
right: $offset
animation-delay: 0.52s
}
.dot5 {
right: 0
top: 50%
margin-top: -$radius
animation-delay: 0.65s
}
.dot6 {
right: $offset
bottom: $offset
animation-delay: 0.78s
}
.dot7 {
bottom: 0
left: 50%
margin-left: -$radius
animation-delay: 0.91s
}
.dot8 {
bottom: $offset
left: $offset
animation-delay: 1.04s
}
}
代码使用scss定义了大圆和小圆圈的半径，不管改成多大只需要更改变量，下面样式无需改变。
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.box { width:50px height:50px background:#FC0 position:absolute }
.dot { width:50px height:50px background:#F00 position:absolute }
.container { width:500px height:500px background:#CCC }
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
//中心点横坐标
var dotLeft = ($(".container").width()-$(".dot").width())/2
//中心点纵坐标
var dotTop = ($(".container").height()-$(".dot").height())/2
//起始角度
var stard = 0
//半径
var radius = 200
//设置圆的中心点的位置
$(".dot").css({"left":dotLeft,"top":dotTop})
var index =1
setInterval(function(){
$(".box").css({"left":Math.sin((index))*radius+dotLeft,"top":Math.cos((index))*radius+dotTop})
index+=0.005
},1)
})
</script>
</head>
<body>
<div class="container">
<div class="dot"></div>
<div class="box"></div>
</div>
</body>
</html>
dot为中心点，不显示可以把颜色去掉，但不能删这个元素，index控制每次移动多远距离，数值越小越精密，相对的走的也慢，具体参数你根据需求调整吧。
