0

これはおそらくcss3トランジションのことですが、これを作成するのに十分なcssを知りません。主に私がやりたいのは、ボタンのサイズを数ミリ秒（元のサイズの125％）大きくしてから、ページが次のページに進む前に元のサイズに戻すことです。これはcss/css3 / transitionsで可能ですか？もしそうなら、これはどのように行われますか？

ありがとうございました！

4

3 に答える 3

1

ボタンをanにし、疑似クラスを<a>使用して展開効果を実行します。:activeレイアウトを台無しにすることなくこれを行う簡単な方法は、outlineプロパティです。

デモ： jsFiddle

CSS：

.button {
    background-color: black;
    border: 1px solid black;
    color: white;
    display: inline-block;
    padding: 5px;
}

.button:active {
    outline: 10px solid black;    
}

HTML：

<a class="button">press me</a>
​
于 2012-11-20T23:19:37.373 に答える
0

Mozilla Developer Networkには、CSS3トランジションに関する優れた入門チュートリアルがあります。サンプルとソースコードのいくつかをステップスルーして、それがあなたがやろうとしていることを理解するのに役立つかどうかを確認することをお勧めします。

アニメーションの長さのタイミングについては、上記のリンクから「トランジションタイミングエフェクトサンプラー」を簡単に調整して、目的のエフェクトが得られるまでさまざまなタイミングを試すことができるはずです。

于 2012-11-20T23:09:17.270 に答える
0

このような高速エフェクトトランジションは必要ありません。要素のサイズを変更するだけです。

効果を可視化するには、数ミリ秒では不十分です。20ミリ秒未満のもの。画面が表示されるほど速く更新されないため、はまったく表示されません。約100ミリ秒。単なるグリッチではなく、意図的な効果のように見せるために必要です。

例：

$('input[type=button]').click(function(){
  var e = $(this);
  e.addClass('grown');
  window.setTimeout(function(){
    e.removeClass('grown');
  }, 100);
});

デモ： http： //jsfiddle.net/Guffa/GEHCZ/

于 2012-11-20T23:19:40.697 に答える