Html 自动放大 n out CSS（类似苹果的幻灯片效果）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25968160/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
auto zoom in n out CSS (apple-like slideshow effect)
提问by lauWM
I like pretty much the slow auto zoom in and out effect on that site : http://watchingtheworldcup.com/for banner images such as the very top one. I tired to replicate it, by looking at developer tools wihtin browser, but have some trouble implementing it as in developper tool some mentions are stroked etc.
我非常喜欢该网站上缓慢的自动放大和缩小效果：http: //watchingtheworldcup.com/用于横幅图像，例如最顶部的图像。我厌倦了通过查看浏览器中的开发人员工具来复制它，但是在实现它时遇到了一些麻烦，因为在开发工具中有些提及被抚摸等。
here is my html :
这是我的 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>
and my css for the image :
和我的 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;
}
Can someone help with with finding the right css settings ? cheers,
有人可以帮助找到正确的 css 设置吗？干杯，
回答by max li
Use css animation you can get the similar result.
使用 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" />回答by Yannick Ferket
If you want to also zoom out you need to define the the milestones in your keyframes as such:
如果您还想缩小，您需要在关键帧中定义里程碑：
@-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);
}
}
回答by Vedant Terkar
Use css transform:scale();
用 css transform:scale();
like:
喜欢：
JavaScript:
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>