Question

尝试使用CSS创建两种不同类型的关键帧移动。实现这一目标的最简单，最简洁的方法是什么？我希望云层像现在一样向上移动，但我也希望它们随着它们的上升而摇晃一下。谢谢你的帮助。

#clouds div {position:absolute; width:230px;}
#clouds div img{ display:block; margin-left: auto;margin-right: auto;}
.Blittle img{ width:42px; float:left;}
.BlittleUP img{ width:51px; float:right}
.Bmedium img{ width:90px; float:left}
.BmediumUP img{ width:120px; float:right}
.BmediumUPUP img{ width:140px}
.Bbig img{ width:280px; float:right}

.Blittle { animation: moveclouds 14s infinite linear forwards;-webkit-animation: moveclouds 14s infinite linear forwards;-moz-animation: moveclouds 14s infinite linear forwards;-o-animation: moveclouds 14s infinite linear forwards;}
.BlittleUP  { animation: moveclouds 16s infinite linear forwards; -webkit-animation: moveclouds 16s infinite linear forwards;-moz-animation: moveclouds 16s infinite linear forwards;-o-animation: moveclouds 16s infinite linear forwards;}
.Bmedium   { animation: moveclouds 17s infinite linear forwards;-webkit-animation: moveclouds 17s infinite linear forwards;-moz-animation: moveclouds 17s infinite linear forwards;-o-animation: moveclouds 17s infinite linear forwards;}
.BmediumUP  { animation: moveclouds 18s infinite linear forwards;-webkit-animation: moveclouds 18s infinite linear forwards;-moz-animation: moveclouds 18s infinite linear forwards;-o-animation: moveclouds 18s infinite linear forwards;}
.BmediumUPUP  { animation: moveclouds 19s infinite linear forwards;-webkit-animation: moveclouds 19s infinite linear forwards;-moz-animation: moveclouds 19s infinite linear forwards;-o-animation: moveclouds 19s infinite linear forwards;}
.Bbig  { animation: moveclouds 22s infinite linear forwards;-webkit-animation: moveclouds 22s infinite linear forwards;-moz-animation: moveclouds 22s infinite linear forwards;-o-animation: moveclouds 22s infinite linear forwards;}


.BC-1 {left:5%; }
.BC-2 {left:14.5%;}
.BC-3 {left:25%;}
.BC-4 {left:37.5%; }
.BC-5 {left:50%;}
.BC-6 {left:62.5%; }
.BC-7 {left:75%;}
.BC-8 {left:87.5%; }


.BC-1 img{ margin-top:500px}
.BC-2 img{margin-top:100px}
.BC-3 img{ margin-top:300px}
.BC-4 img{ margin-top:150px}
.BC-5 img{margin-top:350px}
.BC-6 img{ margin-top:0px}
.BC-7 img{ margin-top:700px}
.BC-8 img{ margin-top:100px}
.Blittle.BC-8 img{margin-top:350px}
.BlittleUP.BC-3 img{margin-top:0px}
.BmediumUP.BC-4 img{margin-top:700px}



@keyframes moveclouds { 
    0% {  transform: translate(0px, 700px);}
    100% { transform: translate(0px, -1200px);}
}

@-webkit-keyframes moveclouds { 
    0% {  -webkit-transform: translate(0px, 700px);}
    100% { -webkit-transform: translate(0px, -1200px);}
}

@-moz-keyframes moveclouds { 
    0% {  -moz-transform: translate(0px, 700px);}
    100% { -moz-transform: translate(0px, -1200px);}
}
@-o-keyframes moveclouds { 
    0% {  -o-transform: translate(0px, 700px);}
    100% { -o-transform: translate(0px, -1200px);}
}
#clouds .container { position:absolute; top:50%;     -webkit-transform: translate(0%, -50%);   -moz-transform: translate(0%, -50%);   -ms-transform: translate(0%, -50%);   -o-transform: translate(0%, -50%);   transform: translate(0%, -50%);     width: 100%;}

Answer 1

你能用HTML双重包裹云吗？让父包装器使用现有的'moveclouds'关键帧，子包装器使用一个“摇动”它们的新动画。

向css添加两个关键帧移动

1 个答案: