* {
margin: 0;
}
@keyframes sky {
0% {
background: #0e0e42
}
33% {
background: #78706d
}
50% {
background: #fad6bf
}
66% {
background: #b6ffde
}
100% {
background: #0e0e42
}
}
@keyframes balloon {
0% {
transform: rotate(10deg);
transition: transform;
}
25% {
transform: translateX(-400px) rotate(30deg);
transition: transform;
}
50% {
transform: translateX(-720px) rotate(60deg);
transition: transform;
}
75% {
transform: translateX(-1000px) rotate(40deg);
transition: transform;
}
100% {
transform: translateX(-1400px);
transition: transform;
}
}
#father {
position: relative;
height: 800px;
width: 1500px;
animation: sky 30s linear infinite;
}
img{
position: absolute;
right: -70px;
top: 30px;
animation: balloon 30s linear infinite alternate;
}
#father div:nth-of-type(1) {
background: url(8/beans.png);
width: 88px;
height: 201px;
position: absolute;
left: 655px;
bottom: 180px;
}
#father div:nth-of-type(2) {
background: url(8/skyline.png);
width: 1500px;
height: 147px;
position: absolute;
bottom: 156px;
}
#father div:nth-of-type(3) {
background: url(8/groundBack.png) 65px;
width: 1500px;
height: 281px;
position: absolute;
bottom: 0;
}
#father div:nth-of-type(4) {
background: url(8/Glockenspiel.png);
width: 137px;
height: 263px;
position: absolute;
left: 518px;
bottom: 155px;
}
#father div:nth-of-type(5) {
background: url("8/Planetarium.png");
width: 347px;
height: 285px;
position: absolute;
left: 832px;
bottom: 108px;
}
#father div:nth-of-type(6) {
background: url("8/dowEventCenter.png");
width: 520px;
height: 229px;
position: absolute;
left: 67px;
bottom: 125px;
}
#father div:nth-of-type(7) {
background: url("8/groundMid.png");
width: 1500px;
height: 299px;
position: absolute;
bottom: 0;
}
#father div:nth-of-type(8) {
background: url("8/friendshipShell.png");
position: absolute;
width: 231px;
height: 370px;
left: 262px;
bottom: 108px;
}
#father div:nth-of-type(9) {
background: url("8/groundFront.png") 255px;
width: 1500px;
height: 301px;
position: absolute;
bottom: 0;
}
本文来源于网络:查看 >https://www.cnblogs.com/ypha/p/13698834.html