文字滚动

<marquee>标签的属性
  direction 表示滚动的方向,值可以是left,right,up,down,默认为left;
  behavior 表示滚动的方式,值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动);
  loop 表示循环的次数,值是正整数,默认为无限循环;
  scrollamount 表示运动速度,值是正整数,默认为6;(数值越小运动速度越慢)
  scrolldelay 表示停顿时间,值是正整数,默认为0,单位是毫秒;
  valign 表示元素的垂直对齐方式,值可以是top,middle,bottom,默认为middle;
  align 表示元素的水平对齐方式,值可以是absbottom:绝对底部对齐(与g、p等字母的最下端对齐),absmiddle:绝对中央对齐,baseline:底线对齐,bottom:底部对齐(默  认),left:左对齐,middle:中间对齐,right:右对齐,texttop:顶线对齐,top:顶部对齐;
  bgcolor 表示运动区域的背景色,值是16进制的RGB颜色,默认为白色;
  height、width 表示运动区域的高度和宽度,值是正整数(单位是像素)或百分数,默认width=100% height为标签内元素的高度;
  hspace、vspace 表示元素到区域边界的水平距离和垂直距离,值是正整数,单位是像素;
 
第一种方法:
// scrolldelay="800" scrollamount="100"
<marquee direction="right" onmouseover=this.stop() onmouseout=this.start()>我想鼠标放上来bai就停止</marquee>
 
 
 第二种方法:
<style>
      .container {
        width: 100%;
        height: 20px;
        position: relative;
        border: 1px solid red;
        overflow: hidden;
      }
      .text {
        position: absolute;
        right: -300px;
        width: 288px;
        animation: myscroll 15s linear 1s infinite running;

      }
      .text:hover {  // 暂停动画
        animation-play-state:paused;
      }

      @keyframes myscroll {
        100% {right: 1000px}
      }
    </style>
  </head>

<body>
  <div class="container">
    <div class="text">
      <span>循环滚动播放滴滴答答滴滴答答滴滴答答</span>
    </div>
    <div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
原文地址:https://www.cnblogs.com/maxiag/p/13509808.html