问题:刚开始以为PC端动画覆盖了移动端,但是当我注释PC端动画,发现响应式动画失效了,不知道什么原因
原因:红色部分命名一样,导致失效
解决办法:重命名
HTML
PC端的css
.bg-light1{
height: 53.4375rem;
background: url(../images/cus12.png) no-repeat 50%;
background-size: cover;
position: relative;
}
div.imga{
width: 58px;
height: 56px;
position: absolute;
animation: run 4s ease-in-out infinite alternate 1s;
}
.imga:first-child{
background: url(../images/modal-2-icon1.png) no-repeat center center / cover;
position: absolute;
top: 31rem;
left: 22.5rem;
}
.imga:nth-child(2){
background: url(../images/modal-2-icon2.png) no-repeat center center / cover;
position: absolute;
top: 20rem;
left: 34.5rem;
}
.imga:nth-child(3){
background: url(../images/modal-2-icon3.png) no-repeat center center / cover;
position: absolute;
top: 38rem;
left: 35.5rem;
}
.imga:nth-child(4){
background: url(../images/modal-2-icon4.png) no-repeat center center / cover;
position: absolute;
top: 26rem;
left: 44.3rem;
}
.imga:nth-child(5){
background: url(../images/modal-2-icon5.png) no-repeat center center / cover;
position: absolute;
top: 15.5rem;
left: 55.6rem;
}
.imga:nth-child(6){
background: url(../images/modal-2-icon6.png) no-repeat center center / cover;
position: absolute;
top: 22rem;
left: 70.8rem;
}
.imga:nth-child(7){
background: url(../images/modal-2-icon7.png) no-repeat center center / cover;
position: absolute;
top: 19.5rem;
right: 26rem;
}
.imga:nth-child(8){
background: url(../images/modal-2-icon8.png) no-repeat center center / cover;
position: absolute;
top: 29.8rem;
right: 19rem;
}
.imga:nth-child(9){
background: url(../images/modal-2-icon9.png) no-repeat center center / cover;
position: absolute;
top: 38rem;
left: 89.5rem;
}
.imga:nth-child(10){
background: url(../images/modal-2-icon10.png) no-repeat center center / cover;
position: absolute;
bottom: 9rem;
right: 38.5rem;
}
@keyframes run{
0%{transform: scale(2);}
50%{transform: scale(1.5);}
75%{transform: scale(2);}
100%{transform: scale(1.5);}
}
移动端css
/* 地图 */
.bg-light1 .container{
display: none;
}
.containers{
width: 100%;
height: 42rem;
background-image: url(../images/big2.png);
background-size: 100% 90%;
background-repeat: no-repeat;
margin-top: 2.5rem;
position: relative;
}
.containers .imgas{
width: 58px;
height: 56px;
position: absolute;
animation: walk 4s ease-in-out infinite alternate 1s;
}
.imgas:first-child{
position: absolute;
top: -1.5rem;
left: 5rem;
background: url(../images/modal-2-icon1.png) no-repeat center center / cover;
}
.imgas:nth-child(2){
position: absolute;
top: 0;
left: 18.8rem;
background: url(../images/modal-2-icon2.png) no-repeat center center / cover;
}
.imgas:nth-child(3){
position: absolute;
top: 6.8rem;
left: 5rem;
background: url(../images/modal-2-icon3.png) no-repeat center center / cover;
}
.imgas:nth-child(4){
position: absolute;
top: 5rem;
left: 13rem;
background: url(../images/modal-2-icon4.png) no-repeat center center / cover;
}
.imgas:nth-child(5){
position: absolute;
top: 13rem;
left: 8.5rem;
background: url(../images/modal-2-icon5.png) no-repeat center center / cover;
}
.imgas:nth-child(6){
position: absolute;
top: 17rem;
left: 16rem;
background: url(../images/modal-2-icon6.png) no-repeat center center / cover;
}
.imgas:nth-child(7){
position: absolute;
top: 22rem;
left: 1.5rem;
background: url(../images/modal-2-icon7.png) no-repeat center center / cover;
}
.imgas:nth-child(8){
position: absolute;
top: 25rem;
left: 18.5rem;
background: url(../images/modal-2-icon8.png) no-repeat center center / cover;
}
.imgas:nth-child(9){
position: absolute;
top: 30.5rem;
left: 12rem;
background: url(../images/modal-2-icon9.png) no-repeat center center / cover;
}
.imgas:nth-child(10){
position: absolute;
top: 33rem;
left: 4rem;
background: url(../images/modal-2-icon10.png) no-repeat center center / cover;
}
@keyframes walk{
0%{transform: scale(1.2);}
50%{transform: scale(.8);}
75%{transform: scale(1.2);}
100%{transform: scale(.8);}
}