ファイルをアップロードするときに仕様するコード＜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＞
#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;
}
input[type=”file”] {
-webkit-appearance: initial;
padding: initial;
background-color: initial;
border: initial;
}
大きさやスピードを変化させたい時は(scale)と(all ～ s)の値を変えます。
ボタンが拡大されることでちょっとした面白さが生まれますね。
