首页 > 代码库 > animation循环滚动
animation循环滚动
css3 简单循环滚动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> @keyframes lbody { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, -520px, 0); //滚动内容div高度和 } } .box{ width: 800px; border: 1px solid #000000; position: absolute; height: 500px; overflow: hidden; } .box .lbody{ animation: 15s lbody linear infinite normal; position: absolute; } </style></head><body> <div class="box"> <div class="lbody"> <div><img width="800" height="100" style="background-color: #0002ff"></div> <div><img width="800" height="100" style="background-color: #00fff7"></div> <div><img width="800" height="100" style="background-color: #4bff00"></div> <div><img width="800" height="100" style="background-color: #ffe500"></div> <div><img width="800" height="100" style="background-color: #ff0900"></div> <div><img width="800" height="100" style="background-color: #0002ff"></div> <div><img width="800" height="100" style="background-color: #00fff7"></div> <div><img width="800" height="100" style="background-color: #4bff00"></div> <div><img width="800" height="100" style="background-color: #ffe500"></div> <div><img width="800" height="100" style="background-color: #ff0900"></div> </div> </div></body></html>
animation循环滚动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。