2014年4月3日

file type 〜 のボタンをマウスオーバーさせると拡大するアニメーション

ファイルをアップロードするときに仕様するコード<file type>。この部分をマウスオーバーさせた時に拡大するアニメーションをCSSだけでカンタンに実装できる方法をご紹介します。

まずは標準のコード
<input type="file" />だとこのようになります。

続いてこのCSSを加えるとマウスオーバーさせた時にグッと拡大するアニメーションが付与されます。
<style type="text/css">
#upload:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
}
#upload{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
</style>


大きさやスピードを変化させたい時は(scale)と(all ~ s)の値を変えます。
ボタンが拡大されることでちょっとした面白さが生まれますね。

この情報を共有する

0 件のコメント :

コメントを投稿

Related Posts Plugin for WordPress, Blogger...