CSS3による装飾とアニメーションを使用したログインフォーム

CSS3による装飾とアニメーションを使用した、シンプルで美しいログインフォームを紹介します。

Smarten Up a Slick Login Form With CSS3

必要な部分を元記事より抜粋しています。

DEMO

HTML

HTMLは以下のようにシンプルなものです。

CSS

IDとパスワードを入力するテキストボックスを以下のCSSで装飾します。

そしてログインボタンを以下のCSSで装飾します。

Animation

ページロード時のふわりと現れるアニメーションを以下のCSSで実装します。

まずふわりと現れるアニメーションを設定します。

そしてキーフレーム名「login」をformタグに対して設定します。

実際の仕上がりはデモページで見てみてください。

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。