Bootstrap 如何使轮播图像在淡入淡出过渡前略微缩放

ztyzrc3y 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(2)|浏览(188)

我正在为一个班级建立一个网站，我喜欢这个网页www.sweetgreen.com，他们的图像似乎在淡入淡出过渡之前稍微放大了一点。我得到了淡入淡出，但它很快，不优雅地做到这一点。我可能会弄清楚这一点，虽然，轻微的缩放效果是我想知道如何做的，我已经检查了这个元素，并在我的rails应用程序的 Bootstrap 样式表中应用了一些类。

`<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>

twitter-bootstrap

来源：https://stackoverflow.com/questions/29739158/how-to-make-carousel-image-slightly-zoom-before-the-fade-transition

2条答案

按热度按时间

eiee3dmh1#

我已作了明确的演示：https://jsfiddle.net/wyvguf25/
这一个基于Bootstrap3：https://jsfiddle.net/q0rgL8ws/
第一个使用opacity。对于使用display的Bootstrap

赞(0）回复(0）举报 2022-12-08

pu82cl6c2#

@-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;
}

它的工作与第一滑块，有缩放效果太。

赞(0）回复(0）举报 2022-12-08

我来回答

Bootstrap 如何使轮播图像在淡入淡出过渡前略微缩放

2条答案

相关问题

热门标签

最新问答