我正在为一个班级建立一个网站,我喜欢网页 www.sweetgreen.com,他们的图像似乎在淡入淡出过渡之前略微缩放。 我得到了淡入淡出,但它很快,并没有优雅地做到这一点。 不过我大概可以弄清楚这一点,轻微的缩放效果是我想知道如何做的, 我已经检查了该元素,并在我的 Rails 应用程序的引导样式表中应用了一些具有细节的类。 这是我的div
`<div class="item">
<%= link_to image_tag("carousel_img2.jpeg", :size => "1600x200", :alt =>
"Slide2"), {:class => "img-responsive center-block", :alt => "Responsive
image"} %>
<div class="carousel-caption text-center">
</div>
我已经做了一个明确的演示:https://jsfiddle.net/wyvguf25/
这个是基于Bootstrap3的:https://jsfiddle.net/q0rgL8ws/
第一个是使用 opacity
.对于使用display
的引导程序
@-webkit-keyframes move {
from {
transform: scale(1, 1);
-ms-transform: scale(1, 1); /* IE 9 */
-webkit-transform: scale(1, 1); /* Safari and Chrome */
-o-transform: scale(1, 1); /* Opera */
-moz-transform: scale(1, 1); /* Firefox */
}
to {
transform: scale(1.05, 1.05);
-ms-transform: scalescale(1.05, 1.05); /* IE 9 */
-webkit-transform: scalescale(1.05, 1.05); /* Safari and Chrome */
-o-transform: scalescale(1.05, 1.05); /* Opera */
-moz-transform: scale(1.05, 1.05);/* Firefox */
}
}
.item .zoomin {
animation:move 7s ease infinite;
-ms-animation:move 7s ease infinite;
-webkit-animation:move 7s ease infinite;
-o-animation:move 7s ease infinite;
-moz-animation:move 7s ease infinite;
background-color:Black;
left:-150px;
top:-150px;
}
它与第一个滑块一起工作,该滑块也具有缩放效果。