html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- body, p {
- margin: 0;
- }
- .marquee {
- margin: 50px auto;
- width: 300px;
- font-size: 0;
- overflow-x: hidden;
- background-color: #ccc;
- }
- .wrapper {
- display: inline-block;
- white-space: nowrap;
- }
- .marquee.play .wrapper {
- animation: marquee 5s linear infinite;
- }
- .text {
- display: inline-block;
- margin-right: 50px;
- color: red;
- font-size: 16px;
- line-height: 2;
- }
- /* 跑马灯播放样式 */
- @keyframes marquee {
- to {
- transform: translateX(-50%);
- }
- }
- </style>
- </head>
- <body>
- <div class="marquee">
- <div class="wrapper">
- <p class="text"> 你好吗你好吗你好吗你好吗你好吗你好吗你好吗你好吗 </p>
- </div>
- </div>
- <script src="https://cdn.bootCSS.com/jquery/3.2.1/jquery.min.js"></script>
- <script>
- var $marquee = $('.marquee'),
- $text = $marquee.find('.text');
- if ($text.width()> $marquee.width()) {
- $text.after($text.clone());
- $marquee.addClass('play');
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/17631/5eee7c05665c583267ad9383692d4bce.html