【问题标题】:Static background needs to be dynamic静态背景需要动态
【发布时间】:2016-12-26 01:45:14
【问题描述】:

我希望我的背景像滑块一样移动,因为现在我的背景没有移动。这是我尝试为滑块添加简码的代码,但它不起作用。

<div class="SFOI clearfix" style="background: url('') no-repeat top center; background-size: cover; ">

我想让背景移动:

【问题讨论】:

    标签: jquery css wordpress slider flexslider


    【解决方案1】:

    这个可以用这个

    HTML

    <div id="slider">
    <figure>
     <img src="https://i.ytimg.com/vi/KXdUNp_9oHs/hqdefault.jpg" alt>
     <img src="http://zoedouceur.z.o.pic.centerblog.net/11042612345122694.jpg" alt>
     <img src="http://www.lanu.de/media/thumbnails/867/9c9ca240b73a8f5cf7cbbd8b16473867/df2a2872.jpg" alt>
     <img src="http://strapya.typepad.com/photos/uncategorized/waterfall.jpg" alt>
     <img src="https://naturesimage.files.wordpress.com/2013/06/binnaburra.jpg" alt>
     </figure>
     </div>
    

    CSS

    @keyframes slidy {
      0% { left: 0%; }
      20% { left: 0%; }
      25% { left: -100%; }
      45% { left: -100%; }
      50% { left: -200%; }
      70% { left: -200%; }
      75% { left: -300%; }
      95% { left: -300%; }
      100% { left: -400%; }
      }
    
    body { margin: 0; } 
    div#slider { overflow: hidden; }
    div#slider figure img { width: 20%; float: left; }
    div#slider figure { 
      position: relative;
      width: 500%;
      margin: 0;
      left: 0;
      text-align: left;
      font-size: 0;
      animation: 30s slidy infinite; 
      }
    

    看到这个正在运行的Fiddle

    【讨论】:

    猜你喜欢
    • 2018-09-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-10-22
    • 1970-01-01
    • 1970-01-01
    • 2019-05-19
    相关资源
    最近更新 更多