[英]auto zoom in n out CSS (apple-like slideshow effect)
我非常喜歡在該網站上緩慢的自動放大和縮小效果: 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設置嗎? 干杯,
使用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" />
如果您還要縮小,則需要在關鍵幀中定義里程碑,如下所示:
@-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);
}
}
使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.