zoukankan      html  css  js  c++  java
  • 文字滚动

    <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>
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    记账本开发进程第四天
    记账本开发进程第三天
    记账本开发进程第二天
    记账本开发进程第一天
    《人月神话》阅读笔记三
    《人月神话》阅读笔记二
    一、计算机基础
    Fox and Minimal path CodeForces
    Maximum Value (二分+思维枚举)
    True Liars (思维想法+带权并并查集+01背包)
  • 原文地址:https://www.cnblogs.com/maxiag/p/13509808.html
Copyright © 2011-2022 走看看