一個面試題，題目：實現一個小圓圍繞大圓轉圈
例1】、先讓她轉起來，也就是自轉：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>circle</title>
<style>
.circle{
margin-top: 50px;
margin-left: 50px;
width: 200px;
height: 200px;
background: #f8f806;
border-radius: 50%;
text-align: center;
color: #fff;
}
.round{
background: #fff;
border-width: 50px;
border-style: solid;
border-color: #000 #eed784 #000 #eed784;;
box-sizing: border-box;
animation:round 3s infinite linear;
transform-origin: 50% 100px;
}
@keyframes round{
to{transform:rotate(1turn);}
}
</style>
</head>
<body>
<div class="circle round">
</body>
</html>
自轉，仿黑膠唱片效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>circle</title>
<style>
.record{
width: 130px;
height: 130px;
border-radius: 50%;
background: #061410;
display: table-cell;
text-align: center;
vertical-align: middle;
animation:spin 3s infinite linear;
transform-origin: 50% 50%;
}
.inner{
box-sizing: border-box;
border: 10px solid #eed784;
width: 70px;
height: 70px;
display: inline-block;
vertical-align: middle;
border-radius: 50%;
background: #fff;
line-height: 50px;
font-size: 24px;
}
@keyframes spin{
to{transform: rotate(1turn);}
}
</style>
</head>
<body>
<div class="record">
<div class="inner">R</div>
</div>
</body>
</html>
例2】、小圓在大圓內公轉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>circle</title>
<style>
.circle{
margin-top: 50px;
margin-left: 50px;
width: 200px;
height: 200px;
background: #000;
border-radius: 50%;
text-align: center;
color: #fff;
}
.ball1{
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background: #eed784;
animation:spin1 3s infinite linear;
transform-origin: 50% 100px;
}
@keyframes spin1{
to{transform: rotate(1turn);}
}
</style>
</head>
<body>
<div class="circle">
<div class="ball1">H</div>
</div>
</body>
</html>
例3】、小圓在大圓外公轉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>circle</title>
<style>
.circle{
margin-top: 50px;
margin-left: 50px;
width: 200px;
height: 200px;
background: #000;
border-radius: 50%;
text-align: center;
color: #fff;
}
.ball2{
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background: #eed784;
position: relative;
top: -30px;
animation:spin2 3s infinite linear;
transform-origin: 50% 130px;
}
@keyframes spin2{
to{transform: rotate(1turn);}
}
</style>
</head>
<body>
<div class="circle">
<div class="ball2">H</div>
</div>
</body>
</html>
最後，你可以試試實現小圓在大圓內/外，公轉同時自轉？
答案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>circle</title>
<style>
.circle{
margin-top: 50px;
margin-left: 50px;
width: 200px;
height: 200px;
background: #000;
border-radius: 50%;
text-align: center;
color: #fff;
}
.ball1{
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 50%;
background: #eed784;
animation:spin1 3s infinite linear;
transform-origin: 50% 100px;
/* transform-origin: 50% 50%; 不設置則自轉*/
}
@keyframes spin1{
to{ transform: rotate(1turn);}
}
.inner1{
animation: spin-reverse 3s infinite linear;
}
/* 留意此處的 to | from */
@keyframes spin-reverse{
to{
transform:rotate(1turn);
}
}
</style>
</head>
<body>
<div class="circle">
<div class="ball1"><div class="inner1">H</div></div>
</div>
</body>
</html>
One more thing，小圓公轉，但不自轉:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>circle</title>
<style>
.circle{
margin-top: 50px;
margin-left: 50px;
width: 200px;
height: 200px;
background: #000;
border-radius: 50%;
text-align: center;
color: #fff;
}
.ball1{
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 50%;
background: #eed784;
animation:spin1 3s infinite linear;
transform-origin: 50% 100px;
/* transform-origin: 50% 50%; 不設置則自轉*/
}
@keyframes spin1{
to{ transform: rotate(1turn);}
}
.inner1{
animation: spin-reverse 3s infinite linear;
}
/* 留意此處的 to | from */
@keyframes spin-reverse{
from{
transform:rotate(1turn);
}
}
</style>
</head>
<body>
<div class="circle">
<div class="ball1"><div class="inner1">H</div></div>
</div>
</body>
</html>