<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="关键字">
<meta name="description" content="简介">
<title>摩天轮动画</title>
<style>
html {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.skywheel {
width: 600px;
height: 600px;
position: relative;
margin: 20px auto 0 auto;
background-image: url(img/sky.png);
animation: sky 8s infinite linear;/* 动画：动画名称 时长 循环 匀速运动 */
margin-top: -1050px;
}
.people1 {
width: 109px;
height: 148px;
position: absolute;
top: 80px;
left: 20px;
background-image: url(img/grils.png);
animation: sky2 8s infinite linear;/* 动画：动画名称 时长 循环 匀速运动 */
}
.people2 {
width: 109px;
height: 148px;
position: absolute;
top: 500px;
left: 300px;
background-image: url(img/boy.png);
animation: sky2 8s infinite linear; /* 动画：动画名称 时长 循环 匀速运动 */
}
.people3 {
width: 109px;
height: 148px;
position: absolute;
left: 490px;
top: 170px;
background-image: url(img/gril.png);
animation: sky2 8s infinite linear;/* 动画：动画名称 时长 循环 匀速运动 */
}
@keyframes sky {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}/*摩天轮动画*/
@keyframes sky2 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}/* 人动画 */
</style>
</head>
<body>
<img src="img/u=733544617,882670619&fm=26&gp=0.jpg" width="100%">
<div class="skywheel">
<div class="people1"></div>
<div class="people2"></div>
<div class="people3"></div>
</div>
</body>
</html>
原文：https://www.cnblogs.com/mxblogs/p/11172959.html