使用css3进行图像缩放和转换

问题描述 投票:2回答:2

我想创建一个动画,首先将它悬停在图像上,它应该是缩放和变换。

#blah - id of that image

要实现图像缩放,我们可以使用这个css吗?

#blah{ -webkit-transition: all .2s ease-in-out; }
#blah:hover { -webkit-transform: scale(1.1);}

但是我们如何在扩展它之后进行转换。任何的想法?

jquery css css3 animation jquery-animate
2个回答
2
投票

你可以通过使用CSS3动画来做到这一点,它简单轻巧,但这一切都取决于你想要的最终效果!

我只使用CSS3制作了这个例子:

Example at jSFiddle!

我还添加了点击过渡,你可以调整时间和动画的translatescaleopacity属性,以获得最佳效果!


HTML:

<div class="cont">
    <div class="img" style="background-image: url('http://good-morning.no/wp-content/uploads/2014/03/thumb1.jpg')"></div>
</div>

<div class="cont">
    <div class="img" style="background-image: url('http://good-morning.no/wp-content/uploads/2014/03/thumb2.jpg')"></div>
</div>

CSS:

.cont{
    width: 360px;
    height: 360px;
    overflow: hidden;
    background-color: #000;
    display:inline-block;
    cursor: pointer;
}
.cont:active {
    opacity: 0.65;
}
.cont:active {
    -webkit-transform: scale(0.98);
}
.img {
    width: 480px;
    height: 480px;
    -webkit-transition: scale .4s ease-in-out;
    -webkit-transition: translate 1s ease-in-out;
    -webkit-transition: opacity .2s ease-in-out;
    opacity: 0.65;
}
.img:hover {
    -webkit-animation: anim 5s 1 ease-out forwards;
    opacity: 1.0;
} 
@-webkit-keyframes anim {
  12% { -webkit-transform: scale(1.1) translate(-10px, -10px) }
  100% { -webkit-transform: translate(-30px, -30px) scale(1.1) }
}

-1
投票

这是你的答案:

blah{
    -webkit-transition: all .2s ease-in-out;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

blah:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
© www.soinside.com 2019 - 2024. All rights reserved.