zoukankan      html  css  js  c++  java
  • 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%;
      }
    }
  • 相关阅读:
    sublime中node测试环境
    常用的win dos命令
    html area图片热点
    Git常用指令整理(Git Cheat Sheet)
    Java研发技术学习路线
    编程+工具基础教程|网站整理
    廖雪峰 Git 教程 + Git-Cheat-Sheet 学习总结
    现成的HTML5框架
    记录下自己学习的点滴-开始写博客
    linux查看日志文件
  • 原文地址:https://www.cnblogs.com/bm20131123/p/12200093.html
Copyright © 2011-2022 走看看