• css3 文字横向无缝滚动


        <div class="notice-container">
              <i class="horn fa fa-bullhorn"></i>
              <div class="header-notice-marquee" id="notice-marquee">
                <span class="header-marquee-item1">尊敬的会员您好,如您遇到无法充值问题</span>
                <span class="header-marquee-item2">尊敬的会员您好,如您遇到无法充值问题</span>
              </div>
            </div> 
     

    .notice-container {
      padding: 0 10px;
      align-items: center;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
      flex: 1;
    }
    .header-notice-marquee {
      white-space: nowrap;
      overflow: hidden;
      position: relative;
       100%;
      height: 20px;
      line-height: 20px;
    }
    .notice-container .header-marquee-item1 {
      margin: 0 10px;
      position: absolute;
      left: 0;
      animation: marquee1 15s linear 8;
    }

    .notice-container .header-marquee-item2 {
      margin: 0 10px;
      position: absolute;
      left: 0;
      animation: marquee2 15s linear 8;
    }

    .notice-container .header-notice-marquee:hover {
      animation-play-state: paused;
    }
    .notice-container .header-notice-marquee .header-marquee-item {
      position: absolute;
      top: 0;
      left: 0;
      white-space: nowrap;
    }
     
    @keyframes marquee1 {
      0% {
        left: 0;
      }
      100% {
        left: -100%;
      }
    }

    @keyframes marquee2 {
      0% {
        left: 100%;
      }
      100% {
        left: 0%;
      }
    }
  • 相关阅读:
    浅谈 cosos2d-x 的ImageView和Sprite的区别
    浅谈JS数据遍历的几种方式
    浅谈Cocos2d-js cc.director
    JavaScript的Let用法
    JS开发工具WebStorm使用快捷键
    python 文件操作
    浅谈代码自动构建工具
    rhel6.4 zabbix 安装时少的bcmath mbstring
    Security:090476]Invalid/unknown SSL header was received from peer locahost during SSL handshake
    jconsole
  • 原文地址:https://www.cnblogs.com/bm20131123/p/12200093.html
Copyright © 2020-2023  润新知