<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@keyframes zhuan {
from{transform: rotate(0)}
100%{transform: rotate(360deg)}
}
@keyframes fanzhuan {
from{transform: rotate(360deg)}
to{transform: rotate(0)}
}
#box{
width: 768px;
height: 768px;
background: url("img/fsw.png");
margin: 50px auto 0;
position: relative;
animation: zhuan 10s linear infinite;
}
#box>img:nth-child(1){
position: absolute;
top: 0;
left: 330px;
animation: fanzhuan 10s linear infinite;
transform-origin: 50% 6%;
}
#box>img:nth-child(2){
position: absolute;
top: 730PX;
left: 330px;
animation: fanzhuan 10s linear infinite;
transform-origin: 50% 6%;
}
#box>img:nth-child(3){
position: absolute;
top: 300PX;
left: -20px;
animation: fanzhuan 10s linear infinite;
transform-origin: 50% 6%;
}
#box>img:nth-child(4){
position: absolute;
top: 300PX;
left: 685px;
animation: fanzhuan 10s linear infinite;
transform-origin: 50% 6%;
}
</style>
</head>
<body>
<div id="box">
<img src="img/boy.png">
<img src="img/dog.png">
<img src="img/girl.png">
<img src="img/girls.png">
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@keyframes zhuan {
from{transform: rotate(0)}
100%{transform: rotate(360deg)}
}
@keyframes fanzhuan {
from{transform: rotate(360deg)}
to{transform: rotate(0)}
}
#box{
width: 768px;
height: 768px;
background: url("img/fsw.png");
margin: 50px auto 0;
position: relative;
animation: zhuan 10s linear infinite;
}
#box>img:nth-child(1){
position: absolute;
top: 0;
left: 330px;
animation: fanzhuan 10s linear infinite;
transform-origin: 50% 6%;
}
#box>img:nth-child(2){
position: absolute;
top: 730PX;
left: 330px;
animation: fanzhuan 10s linear infinite;
transform-origin: 50% 6%;
}
#box>img:nth-child(3){
position: absolute;
top: 300PX;
left: -20px;
animation: fanzhuan 10s linear infinite;
transform-origin: 50% 6%;
}
#box>img:nth-child(4){
position: absolute;
top: 300PX;
left: 685px;
animation: fanzhuan 10s linear infinite;
transform-origin: 50% 6%;
}
</style>
</head>
<body>
<div id="box">
<img src="img/boy.png">
<img src="img/dog.png">
<img src="img/girl.png">
<img src="img/girls.png">
</div>
</div>
</body>
</html>