[英]Using CSS3 fadein on .orbit-caption or individual elements inside .orbit-caption?
I would love to be able to fadein certain individual elements inside my .orbit-caption (such as an h2 or a button). 我希望能够淡入.orbit标题内的某些单独元素(例如h2或按钮)。 I've tried applying the CSS3 to both .orbit-caption and individual elements, but nothing works...any ideas?
我尝试将CSS3应用于.orbit-caption和单个元素,但没有任何效果……有什么想法?
Example markup (fadein applied to .orbit-container) is below. 标记示例(应用于.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;
}
You need to set your custom styles before you (generally) initialize Foundation. 您(通常)初始化Foundation之前,需要设置自定义样式。 So for example if this is your custom style:
因此,例如,如果这是您的自定义样式:
.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;
}
To make it work: 要使其起作用:
$(document).foundation('orbit', {
orbit_transition_class: 'the_coolest_orbit_style'
});
$(document).foundation();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.