CSS3天空云朵

/*使用CSS3制作天空云朵*/
.sky {
position: relative;
width: 100%;
height: 400px;
background: #5E83A5; /*天空的顏色*/
}
.cloud {
position: absolute;
background: #fff; /*云朵的顏色*/
border-radius: 50%; /*設(shè)置圓形*/
animation: float 20s ease-in-out infinite, 
transform 10s ease-in-out infinite;
}
.cloud:nth-child(1) {
top: 50px; left: 50px;
width: 100px; height: 60px;
animation-delay: 0s, 2s;
}
.cloud:nth-child(2) {
top: 70px; left: 150px;
width: 120px; height: 80px;
animation-delay: 1s, 3s;
}
.cloud:nth-child(3) {
top: 120px; left: 250px;
width: 80px; height: 60px;
animation-delay: 2s, 4s;
}
.cloud:nth-child(4) {
top: 150px; left: 350px;
width: 120px; height: 80px;
animation-delay: 3s, 5s;
}
.cloud:nth-child(5) {
top: 120px; left: 450px;
width: 100px; height: 60px;
animation-delay: 4s, 6s;
}
/*動畫*/
@keyframes float {
0% {transform: translateY(0);}
50% {transform: translateY(-10px);}
100% {transform: translateY(0);}
}
@keyframes transform {
0% {transform: scale(1);}
50% {transform: scale(1.1);}
100% {transform: scale(1);}
}

這段代碼可以制作出一個有多個浮動的帶有云朵的天空效果。可以根據(jù)需要進(jìn)行修改云的數(shù)量、大小和動畫的時間。通過CSS3的動畫特性，給網(wǎng)頁帶來更加生動、有趣的展示方式。