自动放大n输出CSS（苹果般的幻灯片效果）

Question

我非常喜欢该网站上的慢速自动放大和缩小效果：http://watchingtheworldcup.com/用于横幅图片，例如最顶层的图片。 我厌倦了通过浏览器查看开发人员工具来复制它，但是在开发工具中实现它时遇到了一些麻烦，有些提及被描述等等。

这是我的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设置吗？ 干杯，

Answer 1

使用css动画可以得到类似的结果。

/* Chrome, Safari, Opera */
@-webkit-keyframes zoom {
    from {
    	-webkit-transform: scale(1,1);
    }
    to {
    	-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" />

Answer 2

如果您还要缩小，则需要在关键帧中定义里程碑：

@-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);
    }
}

Answer 3

使用css transform:scale();

像：

JavaScript的：

＆＃13;

＆＃13;

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

＆＃13;

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:

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;