width: 18px; height: 20px; border: 1px solid #fff; background-color: #fff; } .blackBox { position: relative; box-shadow: 0px 0px 4px #fff; margin-left: 5px; align-self: center; height: 20px;
width: 18px; border: 1px solid #fff; background-color: rgba(255, 255, 255, 0); } .scrollOut { width: 400px; height: 100px; overflow: hidden; margin: 100px auto; border: 1px solid red; position: relative; background-color: blueviolet; } .scrollOut .scrollList { width: 200%; height: 100px; position: absolute; left: -100%; top: 0; animation: scrollImg 4s linear infinite; } .scrollOut .scrollList li { float: left; list-style: none; width: 100px; height: 100px; } .scrollOut .scrollList img { width: 100%; height: 100%; } @-webkit-keyframes scrollImg { 0% { left: -400px; } 100% { left: 0px; } } </style> </head> <body> <div class="scrollOut"> <ul class="scrollList"> <li> <div class="blackBox"> <span></span> </div> </li> <li> <div class="whiteBox"> <span></span> </div> </li> <li> <div class="blackBox"> <span></span> </div> </li> <li> <div class="whiteBox"> <span></span> </div> </li> <li> <div class="blackBox"> <span></span> </div> </li> <li> <div class="whiteBox"> <span></span> </div> </li> <li> <div class="blackBox"> <span></span> </div> </li> <li> <div class="whiteBox"> <span></span> </div> </li> </ul> </div> </body> </html>