• 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%;
      }
    }
  • 相关阅读:
    ubuntu安装iscsi
    函数模板的trick
    EF-Code First(5):二级缓存
    了解线程的属性及方法
    算法--中位数计算
    实习面试
    长轮询实现Chat并迁移到Azure测试
    非聚集索引及其性能优化
    架构设计方案
    大话数据结构-图
  • 原文地址:https://www.cnblogs.com/bm20131123/p/12200093.html
Copyright © 2020-2023  润新知