Html部分: <div class="notice"> <ul class="ul1"> <li>质检结果需要保存才能永久存储，否则关闭页面会清空质检数据</li> <li>使用遇到障碍？在左侧导航查看帮助</li> <li>保存质检结果方式可设置手动或自动保存</li> </ul> </div> Css样式: .notice { position: relative; height: 25px; line-height: 30px; width: 100vw; overflow: hidden; background-color: #fff; display: inline-block; background-color: pink; border-radius: 3px; padding-bottom: 10px; } ul,li{ margin: 0; padding: 0; } .ul1{ position: absolute; left: 0; display: block; width: 2160px; list-style: none; -webkit-animation: move 25s linear infinite; animation: move 25s linear infinite; } li{ display: block; float: left; margin-left: 10px; margin-right: 100px; } @keyframes move { 0% { left: 100vw; } 100% { left: -100vw; } }
效果图1 效果图2
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #css3左右移动动画效果 #html部分ampltdiv #ampltul
