所要达到的效果：
效果图
HTML ：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="摩天轮">
<meta name="description" content="利用CSS3来绘制摩天轮">
<link rel="stylesheet" href="css.css">
<title>Ferris Wheel</title>
</head>
<body>
<div class="ferriswheel">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
</div>
</body>
</html>
CSS :
.son1,.son2,.son3{
width: 130px;
height: 170px;
position: absolute;
animation: sonrotate 30s infinite linear;
}
@keyframes wheelrotate{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
@keyframes sonrotate{
from{
transform: rotate(0deg);
}
to{
transform: rotate(-360deg);
}
}
.ferriswheel {
height: 768px;
width: 768px;
margin: 0 auto;
background:url("../images/fsw.png");
position: relative;
animation: wheelrotate 30s infinite linear;
}
.ferriswheel .son1{
top: 45px;
left:85px;
background: url("../images/boy.png");
}
.ferriswheel .son2{
top: 270px;
left: 665px;
background: url("../images/girl.png")
}
.ferriswheel .son3{
top: 615px;
left: 325px;
background: url("../images/shamegirl.png")
}
引用图片：
boy.png
girl.png
shamegirl.png
fsw.png
网友评论