如何实现多个子dom从右到左无线循环播放的动画效果
时间: 2024-05-15 11:14:51 浏览: 15
可以通过CSS3动画和JavaScript实现多个子dom从右到左无线循环播放的动画效果。
1. 首先,在父元素中设置overflow:hidden,使子元素超出父元素的部分被隐藏。
2. 然后,使用CSS3动画将子元素从右侧移动到左侧。
3. 在动画结束后,将子元素重新放置到队列的最后,达到无限循环的效果。
4. 使用JavaScript定时器控制子元素的动画和位置重新排列。
以下是示例代码:
HTML:
```
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
```
CSS:
```
.container {
position: relative;
width: 400px;
height: 100px;
overflow: hidden;
}
.item {
position: absolute;
width: 100px;
height: 100px;
background-color: #ccc;
text-align: center;
line-height: 100px;
font-size: 36px;
animation: move 5s ease-in-out infinite;
}
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
```
JavaScript:
```
var container = document.querySelector('.container');
var items = document.querySelectorAll('.item');
var itemWidth = items[0].offsetWidth;
function rearrangeItems() {
var lastItem = container.removeChild(items[items.length - 1]);
container.insertBefore(lastItem, items[0]);
container.style.transform = 'translateX(' + itemWidth + 'px)';
}
// move items to the left
function moveLeft() {
container.style.transform = 'translateX(0)';
setTimeout(rearrangeItems, 5000);
}
setInterval(moveLeft, 5000);
```
在以上示例中,CSS动画将子元素从右侧移动到左侧,并且在动画结束后,JavaScript重新排列子元素的位置,使其无限循环播放。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)