html城市场景动画,HTML5+CSS3城市场景动画-CSDN博客

本文展示了一段CSS代码，用于创建一个动态的城市场景动画。动画包括天空背景颜色的渐变变化，气球的移动轨迹，以及多个固定元素如建筑、乐器等的布局和背景图片。这段代码可以应用于网页设计或前端开发中，为网站增添生动的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

城市场景动画

* {

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