效果：
image.png
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯css3动画实现轨道旋转效果</title>
<style>
.outer-circle {
display: inline-block;
width:300px;
height: 300px;
margin: 50px auto;
text-align: center;
border-radius: 100%;
background: palegoldenrod;
position: relative;
}
.circle1 {
width: 50px;
height: 50px;
line-height: 50px;
background: cadetblue;
border-radius: 100%;
position: absolute;
top:50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
animation: rotate1 5s infinite linear;
/* transform: translate(0,-150px); */
}
.circle2 {
width: 40px;
height: 40px;
line-height: 40px;
background: yellowgreen;
border-radius: 100%;
position: absolute;
top:50%;
left: 50%;
margin-left: -20px;
margin-top: -20px;
animation: rotate2 3s infinite linear;
/* transform: translate(150px, 0); */
}
@keyframes rotate1 {
from {
transform: rotate(0turn) translate(0,-150px) rotate(1turn)
}
to {
transform: rotate(1turn) translate(0,-150px) rotate(0turn)
}
}
@keyframes rotate2 {
from {
transform: rotate(0turn) translate(150px, 0) rotate(1turn)
}
to {
transform: rotate(1turn) translate(150px, 0) rotate(0turn)
}
}
</style>
</head>
<body>
<div class="outer-circle">
<div class="circle1">Hello</div>
<div class="circle2">Hello2</div>
</div>
</body>
</html>
网友评论