[英]Using CSS3 fadein on .orbit-caption or individual elements inside .orbit-caption?
我希望能夠淡入.orbit標題內的某些單獨元素(例如h2或按鈕)。 我嘗試將CSS3應用於.orbit-caption和單個元素,但沒有任何效果……有什么想法?
標記示例(應用於.orbit容器的淡入淡出)如下。
<section id="carousel">
<div class="row collapse">
<div class="small-12 large-12 columns">
<ul data-orbit>
<li>
<img src="image" />
<div class="orbit-caption">
<h2 class="carousel">Hunting Coolers</h2>
<h3 class="subheader">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
</div>
</li>
<li>
<img src="image" />
<div class="orbit-caption">
<h2 class="carousel">Fishing Coolers</h2>
<h3 class="subheader">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
</div>
</li>
</ul>
</div>
</div>
</section>
#carousel .orbit-container .orbit-slides-container > * .orbit-caption {
position: absolute;
bottom: 0;
color: #fff;
width: 100%;
padding: 10px 14px;
font-size: 0.875em;
-webkit-animation: fadein 5s;
-moz-animation: fadein 5s;
-o-animation: fadein 5s;
animation: fadein 5s;
}
您(通常)初始化Foundation之前,需要設置自定義樣式。 因此,例如,如果這是您的自定義樣式:
.the_coolest_orbit_style {
position: absolute;
bottom: 0;
color: #fff;
width: 100%;
padding: 10px 14px;
font-size: 0.875em;
-webkit-animation: fadein 5s;
-moz-animation: fadein 5s;
-o-animation: fadein 5s;
animation: fadein 5s;
}
要使其起作用:
$(document).foundation('orbit', {
orbit_transition_class: 'the_coolest_orbit_style'
});
$(document).foundation();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.