利用数组切换图片*{padding: 0;margin: 0;}#container{width: 600px;height: 300px;border: 3px solid #666;margin: 20px auto;position: relative;}img{border: 3px solid #000;border-radius: 50%;position: absolute;animation-fill-mode: forwards;transition: all 1s;}img:nth-child(1){top: 70px;left: 118px;/* transform: scale(0.8, 0.8); */z-index: 1;opacity: 0.3;}img:nth-child(2){top: 75px;left: 225px;/* transform: scale(1, 1); */z-index: 3;opacity: 1;}img:nth-child(3){top: 70px;left: 331px;/* transform: scale(0.8, 0.8); */z-index: 1;opacity: 0.3;}a{display: inline-block;background-color: #000;opacity: 0.5;text-decoration: none;color: #fff;font-size: 36px;font-weight: bold;position: absolute;top: 50%;}a:nth-of-type(1){right: 0;}/* img.active0{animation: active0 0.8s;animation-fill-mode: forwards;}@keyframes active0{100% {top: 75px;left: 225px;transform: scale(1, 1);opacity: 1;z-index: 3;}} img.active1{animation: active1 0.8s;animation-fill-mode: forwards;}@keyframes active1{100% {top: 70px;left: 331px;transform: scale(0.8, 0.8);opacity: 0.3;z-index: 1;}} img.active2{animation: active2 0.8s;animation-fill-mode: forwards;}@keyframes active2{100% {top: 70px;left: 118px;transform: scale(0.8, 0.8);opacity: 0.3;z-index: 1;}} */ .scale{transform: scale(0.8, 0.8);}><
不停点击的时候就出现bug，想让里面的img动画执行完了再点击再继续执行，怎么写？ |
天盟APP下载
