1

要素の上にカーソルを置いたときに要素のサイズ/ズームを拡大する最良の方法を知りたい: CSS または jQuery?

私はCSSトランジションでこのフィドルを作りましたが、それは私が望むことをしません.幅と高さは滑らかで比例してサイズ変更されません:

<div></div>

div{

    width: 300px;
    height: 300px;
    background: #aa00aa;
    -moz-transition: height 0.3s ease-in-out;
    -webkit-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
    transition: height 0.3s ease-in-out;

    -moz-transition: width 0.3s ease-in-out;
    -webkit-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;

}

div:hover{
    background: #aa00aa;
    height: 400px;
    width: 400px;

}
4

2 に答える 2

3

この移行により、ボックスが大きくなります

transition: width 1s ease-in-out, height 1s ease-in-out;

しかし、実際のズーム効果を実現するには、ボックスを同時に左と上に移動する必要があります。このようなものhttp://jsfiddle.net/slash197/FCxfR/14/

于 2013-04-23T09:04:07.447 に答える
1

トランジションは、他の CSS ルールと同じように機能します。あなたが持っていた場合：

color: red;
color: green;

...色は緑になります。この場合、トランジションは にのみ適用されwidthます。次の両方を指定できます。

transition: height 0.3s ease-in-out, width 0.3s ease-in-out;

またはとして

transition-property: height, width;
transition-duration: .3s;
transition-timing-function: ease-in-out;

あるいは

transition-property: height, width;
transition: .3s ease-in-out;

http://jsfiddle.net/FCxfR/13/

于 2013-04-23T09:05:16.170 に答える