0

私が正しい軌道に乗っているかどうか疑問に思っています...そして、この質問 CSSアニメーションonClickを参照するのに役立つかもしれません

    $(#alpha).onClick(function({
    $('#alpha').addClass('.blowup');});

.blowup {
-webkit-transform: scale(1.5);
   -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
     -o-transform: scale(1.5);
        transform: scale(1.5);
}

これは機能していません -> http://jsfiddle.net/HQjMc/50/ z-index で何か? ターゲットのiframeに影響を与えないように見えるa href onclickオーバーレイがあります...ありがとう

4

1 に答える 1

1

CSSのみの解決策は次のとおりです。

HTML

<div id='alpha'>
    <iframe src="http://time.is"></iframe>
</div>​

CSS

#alpha {
    opacity:0.38;
    filter:alpha(opacity=38);

  -webkit-transition: all 0.3s ease-out; 
     -moz-transition: all 0.3s ease-out; 
       -o-transition: all 0.3s ease-out; 
          transition: all 0.3s ease-out; 

    -moz-transform:scale(0.25);
    -moz-transform-origin:0 0;
    -o-transform:scale(0.25);
    -o-transform-origin:0 0;
    -webkit-transform:scale(0.25);
    -webkit-transform-origin:0 0 
}

#alpha:hover {
    opacity:0.38;
    filter:alpha(opacity=38);

    -webkit-transform: scale(1.5);
       -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
         -o-transform: scale(1.5);
            transform: scale(1.5);
}

#alpha > iframe {
    positon:fixed;
    zoom:1;
}

例

フィドル_

ps: これは Internet Explorer では機能しません

</p>

于 2012-08-30T12:06:00.910 に答える