文字左轮播

最新推荐文章于 2024-08-27 15:59:21 发布

Mr.Lin

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量425

点赞数

分类专栏：轮播文章标签： javascript css html

本文链接：https://blog.csdn.net/Mr_Zhangsl1/article/details/121117513

版权

轮播专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <script src="layui/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
       <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
       <link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
       <style type="text/css">
           .outer {
               width: 130px;
               height: 30px;
               line-height: 30px;
               overflow: hidden;
               color: #033521;
           }

           .outer ul {
               display: inline-block;
               height: 80px;
               -webkit-transform: translate3d(0, 0, 0);
               /* 3d渲染，开启硬件加速 */
               transform: translate3d(0, 0, 0);
               font-size: 0;
               /* 使inline-block无默认间距 */
               white-space: nowrap;
               /* 超出不折行 */
           }

           .outer ul li {
               display: inline-block;
               padding-right: 50px;
               -webkit-transform: translate3d(0, 0, 0);
               transform: translate3d(0, 0, 0);
               font-size: 12px;
           }

           .theanimation {
               animation: theanimation 20s infinite linear;
               -webkit-animation: theanimation 20s infinite linear;
           }

           @keyframes theanimation {
               from {
                   transform: translateX(0%);
               }

               to {
                   transform: translateX(-100%);
               }
           }

           @-webkit-keyframes theanimation {
               from {
                   -webkit-transform: translateX(0%);
               }

               to {
                   -webkit-transform: translateX(-100%);
               }
           }
       </style>
   </head>
   <body>
       <div>
           <div style="float: left;width: 30px;height: 30px;">
               <i class="layui-icon layui-icon-speaker" style="font-size: 26px; color: #033521;"></i>
           </div>
           <div style="float: left;height: 30px;">
               <div class="outer">
                   <div id="right" style="float: left;">
                       <ul id="J_scroll">
                           <li>1.这是第一条数据</li>
                           <li>2.这是第二条数据</li>
                           <li>1.这是第一条数据</li>
                       </ul>
                   </div>
               </div>
           </div>
       </div>
   </body>
</html>

Mr.Lin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文字左轮播

<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="layui/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script> &l...
复制链接

扫一扫

专栏目录