自動放大n出CSS（類似蘋果的幻燈片效果）

我非常喜歡該網站上的自動縮放放大和縮小效果：http://watchingtheworldcup.com/適用於橫幅圖像，如最上面的一個。我累複製它，通過查看開發工具wihtin瀏覽器，但有其實現爲在developper工具有些提到的撫摸了一些麻煩等自動放大n出CSS（類似蘋果的幻燈片效果）

這裏是我的html：

<div class="row"> 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
     <a href="#"> 
      <article class="article_container"> 
       <img class="article_image_hompage5" src="#">  
       <h2 class="article_title_hompage3"> a favourite thai soup</h2>  
      </article> 
     </a> 
    </div> 
</div>

和我的CSS爲圖像：

.article_image_hompage5{ 
    width: 100%; 
    border-radius: 2px 2px 2px 2px; 
    position:relative; 
    display:block; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:15px; 
    z-index:0; 
}

有人可以幫助找到正確的CSS設置？歡呼聲，

來源

2014-09-22 lauWM

使用CSS動畫，你可以得到類似的結果。

/* Chrome, Safari, Opera */ 
 
@-webkit-keyframes zoom { 
 
    from { 
 
    \t -webkit-transform: scale(1,1); 
 
    } 
 
    to { 
 
    \t -webkit-transform: scale(1.5,1.5); 
 
    } 
 
} 
 

 
/* Standard syntax */ 
 
@keyframes zoom { 
 
    from { 
 
     transform: scale(1,1); 
 
    } 
 
    to { 
 
     transform: scale(1.5,1.5); 
 
    } 
 
} 
 

 

 
img { 
 
    -webkit-animation: zoom 50s; /* Chrome, Safari, Opera */ 
 
    animation: zoom 50s; 
 
}

<img alt="" src="http://watchingtheworldcup.com/photos/worldcup1.jpg" />

來源

2014-09-22 07:16:25

可以請你彰顯我怎麼嵌入那些在我css？ – lauWM 2014-09-22 07:25:45

http://www.w3schools.com/css/css3_animations.asp你的情況，改變img {... to .article_image_hompage5 { – 2014-09-22 07:28:25

thx max li，運作良好。對於將來（初學者）的訪問者來說，只需要一個精確度，圖片需要在div容器內框起來，以避免溢出 – lauWM 2014-09-22 09:02:48

下面的代碼，並使用可以看到關鍵幀的概念是用來放置效果

<html> 
    <head> 
     <style type='text/css'> 
      .zoomClass { 
       animation : 30s linear 1s normal none infinite zoominout 
      } 


      @keyframes zoominout{ 
       0%{ 
        transform:scale(1) 
       } 
       25%{ 
        transform:scale(1.5) 
       } 
       50%{ 
        transform:scale(2) 
       } 
       75%{ 
        transform:scale(1.5) 
       } 
       100%{ 
        transform:scale(1) 
       } 
      } 

      .container{ 
      height:800px; 
      width:100%; 
      overflow:hidden; 
      } 
      .header{ 
       background-image:url(http://www.hdwallpapersinn.com/wp-content/uploads/2014/07/best-picture-of-nature-wallpaper.jpg); 
       background-position:center center; 
       background-size:cover; 
       overflow:hidden; 
       height:100%; 
       width:100%; 
      } 
     </style> 
    </head> 
    <body > 
     <div class="container"> 
     <div class="header zoomClass"></div> 
     </div> 
    </body> 
    </html>

來源

2014-09-22 07:26:08 sanjeev

使用css transform:scale();

，如：

的JavaScript ：

window.onload=function(){ 
 
$("#content").fadeOut(4000); 
 
    $("#background").addClass("zoom"); 
 
    setTimeout(function(){ 
 
    $("#background").removeClass("zoom"); 
 
    },5000); 
 
}

body{ 
 
    margin:0px; 
 
    padding:0px; 
 
    width:100%; 
 
    height:100%; 
 
    } 
 
#background{ 
 
    position:absolute; 
 
    top:0px; 
 
    left:0px; 
 
width:100%; 
 
height:100%; 
 
background:url("http://watchingtheworldcup.com/photos/worldcup1.jpg") center center no-repeat; 
 
background-size: 100% 100%; 
 
display:inline-block; 
 
    z-index:2; 
 
    transition:all ease 4.1s; 
 
    /* transform:scale(1,1);*/ 
 
} 
 
#content{ 
 
    position:absolute; 
 
    top:0px; 
 
    left:0px; 
 
    width:100%; 
 
    height:100%; 
 
    z-index:3; 
 
    background-color:rgba(0,0,0,0.5); 
 
    color:#ffffff; 
 
    font-size:50px; 
 
} 
 
.zoom{ 
 
    transform:scale(1.2,1.2); 
 
} 
 

 
HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div id="background">  
 
</div> 
 
<div id="content"> 
 
    <center><br /><br /><br /><br /><br /><br /> 
 
     Watching... 
 
    </center> 
 
</div>

來源

2014-09-22 07:28:50

如果你也想縮小你需要在關鍵幀來定義的里程碑這樣的：

@-webkit-keyframes zoominout { 
    0% { 
     -webkit-transform: scale(1,1); 
    } 
    50% { 
     -webkit-transform: scale(1.5,1.5); 
    } 
    100% { 
     -webkit-transform: scale(1.1,1.1); 
    } 
}

來源

2015-07-22 12:34:59

自動放大n出CSS（類似蘋果的幻燈片效果）

回答

相關問題