純粋な CSS3 で美しい入力ボックスアニメーションスタイルライブラリを実現 (テキスト入力愛)
|
純粋な CSS3 で実装された美しい入力ボックス アニメーション スタイル ライブラリを共有します - テキスト入力の愛。 各入力ボックスをクリックすると、異なるアニメーション効果が使用され、常にラベルが表示され、プレースホルダー テキストが表示されます。
デモアドレス: https://codepen.io/MichaelArestad/full/ohLIa HTMLコード:
<div class="row">
<p>各入力をクリックします。</p>
</div>
<div class="row">
<span>
<input class="basic-slide" id="name" type="text" placeholder="あなたのベストネーム" /><label for="name">名前</label>
</span>
<span>
<input class="basic-slide" id="email" type="text" placeholder="お気に入りのメール" /><label for="email">メール</label>
</span>
<span>
<input class="basic-slide" id="phone" type="text" placeholder="当社を信頼してください" /><label for="phone">電話</label>
</span>
</div>
<div class="row">
<span>
<input class="clean-slide" id="age" type="text" placeholder="高得点を目指せ！" /><label for="age">年齢</label>
</span>
<span>
<input class="clean-slide" id="height" type="text" placeholder="ヒールの数" /><label for="height">身長</label>
</span>
<span>
<input class="clean-slide" id="weight" type="text" placeholder="どうぞ嘘をついてください" /><label for="weight">体重</label>
</span>
</div>
<div class="row">
<span>
<input class="gate" id="class" type="text" placeholder="Wizard!" /><label for="class">クラス</label>
</span>
<span>
<input class="gate" id="element" type="text" placeholder="5 つから選択" /><label for="element">要素</label>
</span>
<span>
<input class="gate" id="move" type="text" placeholder="秘密の本攻撃！" /><label for="move">移動</label>
</span>
</div>
<div class="row">
<span>
<input class="skinny" id="english" type="text" placeholder="英語を話せますか？" /><label for="english">英語</label>
</span>
<span>
<input class="skinny" id="burger" type="text" placeholder="チーズ入りロイヤル？" /><label for="burger">バーガー</label>
</span>
<span>
<input class="skinny" id="wallet" type="text" placeholder="Bad Mother****er" /><label for="wallet">ウォレット</label>
</span>
</div>
<div class="row">
<span>
<input class="slide-up" id="card" type="text" placeholder="Fund me!" /><label for="card">クレジットカード</label>
</span>
<span>
<input class="slide-up" id="expires" type="text" placeholder="月日、年" /><label for="expires">有効期限</label>
</span>
<span>
<input class="slide-up" id="security" type="text" placeholder="Public" /><label for="security">セキュリティコード</label>
</span>
</div>
<div class="row">
<span>
<input class="card-slide" id="knock" type="text" placeholder="誰ですか?" /><label for="knock">ノックノック</label>
</span>
<span>
<input class="card-slide" id="max" type="text" placeholder="Max って誰？" /><label for="max">Max</label>
</span>
<span>
<input class="card-slide" id="out" type="text" placeholder="Sunuva..." /><label for="out">カードが最大限になりました ;)</label>
</span>
</div>
<div class="row">
<span>
<input class="swing" id="artist" type="text" placeholder="BO$$" /><label for="artist">アーティスト</label>
</span>
<span>
<input class="swing" id="song" type="text" placeholder="どうでもいい" /><label for="song">曲</label>
</span>
<span>
<input class="swing" id="eyes" type="text" placeholder="Crazy" /><label for="eyes">目</label>
</span>
</div>
<div class="row">
<span>
<input class="balloon" id="state" type="text" placeholder="液体、固体、気体..." /><label for="state">状態</label>
</span>
<span>
<input class="balloon" id="planet" type="text" placeholder="おそらく地球" /><label for="planet">惑星</label>
</span>
<span>
<input class="balloon" id="galaxy" type="text" placeholder="天の川?" /><label for="galaxy">銀河</label>
</span>
</div>SCSSコード: Sassコード:
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300,800);
* {
ボックスのサイズ: 境界線ボックス;
}
html,
体 {
オーバーフロー-x:非表示;
フォントファミリ: "Open Sans"、サンセリフ;
フォントの太さ: 300;
色: #fff;
背景: #efefef;
}
@mixin epic-sides() { // https://codepen.io/MichaelArestad/pen/qltuk
位置: 相対的;
zインデックス: 1;
＆：前に {
位置: 絶対;
コンテンツ： "";
表示: ブロック;
上: 0;
左: -5000px;
高さ: 100%;
幅: 15000ピクセル;
Zインデックス: -1;
@コンテンツ;
}
}
。行 {
最大幅: 800px;
マージン: 0 自動;
パディング: 60px 30px;
背景: #032429;
@include epic-sides() {background: inherit;}
テキスト配置: 中央;
&:最初の子 {
パディング: 40px 30px;
}
&:n番目の子(2),
&:n番目の子(8),
&:n番目の子(10){
背景: #134A46;
}
&:n番目の子(3),
&:n番目の子(7) {
背景: #377D6A;
}
&:n番目の子(4),
&:n番目の子(6) {
背景: #7AB893;
}
&:n番目の子(5) {
背景: #B2E3AF;
}
スパン {
位置: 相対的;
表示: インラインブロック;
マージン: 30px 10px;
}
}
.基本スライド{
表示: インラインブロック;
幅: 215ピクセル;
パディング: 10px 0 10px 15px;
フォントファミリ: "Open Sans"、sans;
フォントの太さ: 400;
色: #377D6A;
背景: #efefef;
境界線: 0;
境界線の半径: 3px;
アウトライン: 0;
text-indent: 70px; // 任意。
遷移: すべて .3 のイーズイン アウト。
&::-webkit-入力プレースホルダー {
色: #efefef;
テキストインデント: 0;
フォントの太さ: 300;
}
+ ラベル {
表示: インラインブロック;
位置: 絶対;
上: 0;
左: 0;
パディング: 10px 15px;
テキストシャドウ: 0 1px 0 rgba(19,74,70,.4);
背景: #7AB893;
遷移: すべて .3 のイーズイン アウト。
左上の境界線の半径: 3px;
左下の境界線の半径: 3px;
}
}
.basic-slide:フォーカス、
.basic-slide:アクティブ{
色: #377D6A;
テキストインデント: 0;
背景: #fff;
左上の境界線の半径: 0;
境界線の左下の半径: 0;
&::-webkit-入力プレースホルダー {
色: #aaa;
}
+ ラベル {
変換: translateX(-100%);
}
}
.クリーンスライド{
位置: 相対的;
表示: インラインブロック;
幅: 215ピクセル;
パディング: 10px 0 10px 15px;
フォントファミリ: "Open Sans"、sans;
フォントの太さ: 400;
色: #377D6A;
背景: #efefef;
境界線: 0;
境界線の半径: 3px;
アウトライン: 0;
text-indent: 60px; // 任意。
遷移: すべて .3 のイーズイン アウト。
&::-webkit-入力プレースホルダー {
色: #efefef;
テキストインデント: 0;
フォントの太さ: 300;
}
+ ラベル {
表示: インラインブロック;
位置: 絶対;
変換: translateX(0);
上: 0;
左: 0;
下部: 0;
パディング: 13px 15px;
フォントサイズ: 11px;
フォントの太さ: 700;
テキスト変換:大文字;
色: #032429;
テキスト配置: 左;
テキストシャドウ: 0 1px 0 rgba(255,255,255,.4);
トランジション: すべて .3 秒のイーズイン アウト、カラー .3 秒のイーズアウト。
左上の境界線の半径: 3px;
左下の境界線の半径: 3px;
オーバーフロー: 非表示;
＆：後 {
コンテンツ： "";
位置: 絶対;
上: 0;
右: 100%;
下部: 0;
幅: 100%;
背景: #7AB893;
Zインデックス: -1;
変換: translate(0);
遷移: すべて .3 のイーズイン アウト。
左上の境界線の半径: 3px;
左下の境界線の半径: 3px;
}
}
}
.clean-slide:フォーカス、
.clean-slide:アクティブ{
色: #377D6A;
テキストインデント: 0;
背景: #fff;
左上の境界線の半径: 0;
境界線の左下の半径: 0;
&::-webkit-入力プレースホルダー {
色: #aaa;
}
+ ラベル {
色: #fff;
テキストシャドウ: 0 1px 0 rgba(19,74,70,.4);
変換: translateX(-100%);
＆：後 {
変換: translate(100%);
}
}
}
。ゲート {
表示: インラインブロック;
幅: 215ピクセル;
パディング: 10px 0 10px 15px;
フォントファミリ: "Open Sans"、sans;
フォントの太さ: 400;
色: #377D6A;
背景: #efefef;
境界線: 0;
境界線の半径: 3px;
アウトライン: 0;
text-indent: 65px; // 任意。
遷移: すべて .3 のイーズイン アウト。
&::-webkit-入力プレースホルダー {
色: #efefef;
テキストインデント: 0;
フォントの太さ: 300;
}
+ ラベル {
表示: インラインブロック;
位置: 絶対;
上: 0;
左: 0;
パディング: 10px 15px;
テキストシャドウ: 0 1px 0 rgba(19,74,70,.4);
背景: #7AB893;
遷移: すべて .4 のイーズイン アウト。
左上の境界線の半径: 3px;
左下の境界線の半径: 3px;
transform-origin: 左下;
zインデックス: 99;
＆：前に、
＆：後 {
コンテンツ： "";
位置: 絶対;
上: 0;
右: 0;
下部: 0;
左: 0;
境界線の半径: 3px;
背景: #377D6A;
transform-origin: 左下;
遷移: すべて .4 のイーズイン アウト。
ポインタイベント: なし;
Zインデックス: -1;
}
＆：前に {
背景: rgba(3,36,41,.2);
Zインデックス: -2;
右: 20%;
}
}
}
span:n番目の子(2) .gate {
テキストインデント: 85px;
}
span:n番目の子(2) .gate:focus,
span:nth-child(2) .gate:active{
テキストインデント: 0;
}
.gate:フォーカス、
.gate:アクティブ{
色: #377D6A;
テキストインデント: 0;
背景: #fff;
右上の境界線の半径: 3px;
右下の境界線の半径: 3px;
&::-webkit-入力プレースホルダー {
色: #aaa;
}
+ ラベル {
変換: 回転(-66度);
境界線の半径: 3px;
＆：前に {
変換: 回転(10度);
}
}
}
.スキニー{
表示: インラインブロック;
幅: 215ピクセル;
パディング: 10px 0 10px 15px;
フォントファミリ: "Open Sans"、sans;
フォントの太さ: 400;
色: #377D6A;
背景: #efefef;
境界線: 0;
境界線の半径: 3px;
アウトライン: 0;
text-indent: 75px; // 任意。
遷移: すべて .3 のイーズイン アウト。
&::-webkit-入力プレースホルダー {
色: #efefef;
テキストインデント: 0;
フォントの太さ: 300;
}
+ ラベル {
表示: インラインブロック;
位置: 絶対;
変換: translateX(0);
上: 0;
左: 0;
パディング: 10px 15px;
テキストシャドウ: 0 1px 0 rgba(19,74,70,.4);
遷移: すべて .3 のイーズイン アウト。
左上の境界線の半径: 3px;
左下の境界線の半径: 3px;
オーバーフロー: 非表示;
＆：前に、
＆：後 {
コンテンツ： "";
位置: 絶対;
右: 0;
左: 0;
Zインデックス: -1;
遷移: すべて .3 のイーズイン アウト。
}
＆：前に {
// ここはちょっとだけ
上: 5px;
下: 5px;
background: #377D6A; // これを #134A46 に変更します
左上の境界線の半径: 3px;
左下の境界線の半径: 3px;
}
＆：後 {
上: 0;
下部: 0;
背景: #377D6A;
}
}
}
.skinny:フォーカス、
.skinny:アクティブ{
色: #377D6A;
テキストインデント: 0;
背景: #fff;
&::-webkit-入力プレースホルダー {
色: #aaa;
}
+ ラベル {
変換: translateX(-100%);
＆：後 {
変換: translateX(100%);
}
}
}
.スライドアップ{
表示: インラインブロック;
幅: 215ピクセル;
パディング: 10px 0 10px 15px;
フォントファミリ: "Open Sans"、sans;
フォントの太さ: 400;
色: #377D6A;
背景: #efefef;
境界線: 0;
境界線の半径: 3px;
アウトライン: 0;
text-indent: 80px; // 任意。
遷移: すべて .3 のイーズイン アウト。
&::-webkit-入力プレースホルダー {
色: #efefef;
テキストインデント: 0;
フォントの太さ: 300;
}
+ ラベル {
表示: インラインブロック;
位置: 絶対;
変換: translateX(0);
上: 0;
左: 0;
パディング: 10px 15px;
テキストシャドウ: 0 1px 0 rgba(19,74,70,.4);
遷移: すべて .3 のイーズイン アウト。
左上の境界線の半径: 3px;
左下の境界線の半径: 3px;
オーバーフロー: 非表示;
＆：前に、
＆：後 {
コンテンツ： "";
位置: 絶対;
右: 0;
左: 0;
Zインデックス: -1;
遷移: すべて .3 のイーズイン アウト。
}
＆：前に {
// ここはちょっとだけ
上: 6px;
左: 5px;
右: 5px;
下: 6px;
background: #377D6A; // これを #134A46 に変更します
}
＆：後 {
上: 0;
下部: 0;
背景: #377D6A;
}
}
}
span:n番目の子(1) .スライドアップ {
テキストインデント: 105px;
}
span:n番目の子(3) .スライドアップ {
テキストインデント: 125px;
}
span:n番目の子(1) .slide-up:focus,
span:nth-child(1) .slide-up:active,
span:nth-child(3) .slide-up:focus,
span:nth-child(3) .slide-up:active {
テキストインデント: 0;
}
.スライドアップ:フォーカス,
.スライドアップ:アクティブ{
色: #377D6A;
テキストインデント: 0;
背景: #fff;
&::-webkit-入力プレースホルダー {
色: #aaa;
}
+ ラベル {
変換: translateY(-100%);
＆：前に {
境界線の半径: 5px;
}
＆：後 {
変換: translateY(100%);
}
}
}
.カードスライド{
表示: インラインブロック;
幅: 215ピクセル;
パディング: 10px 0 10px 15px;
フォントファミリ: "Open Sans"、sans;
フォントの太さ: 400;
色: #377D6A;
背景: #efefef;
境界線: 0;
境界線の半径: 3px;
アウトライン: 0;
text-indent: 115px; // 任意。
遷移: すべて .3 のイーズイン アウト。
&::-webkit-入力プレースホルダー {
色: #efefef;
テキストインデント: 0;
フォントの太さ: 300;
}
+ ラベル {
表示: ブロック;
位置: 絶対;
上: 0;
左: 0;
パディング: 10px 15px;
テキストシャドウ: 0 1px 0 rgba(19,74,70,.4);
背景: #7AB893;
遷移: すべて .3 のイーズイン アウト。
左上の境界線の半径: 3px;
左下の境界線の半径: 3px;
変換の原点: 右中央;
変換: 視点(300px) スケールX(1) 回転Y(0度);
}
}
span:n番目の子(2) .カードスライド {
テキストインデント: 55px;
}
span:n番目の子(3) .カードスライド {
テキストインデント: 150px;
}
span:n番目の子(2) .card-slide:focus,
span:n番目の子(2) .card-slide:アクティブ,
span:n番目の子(3) .card-slide:focus,
span:nth-child(3) .card-slide:active {
テキストインデント: 0;
}
.card-slide:フォーカス、
.card-slide:アクティブ{
色: #377D6A;
テキストインデント: 0;
背景: #fff;
左上の境界線の半径: 0;
境界線の左下の半径: 0;
&::-webkit-入力プレースホルダー {
色: #aaa;
}
+ ラベル {
変換: 視点(600px) 移動X(-100%) 回転Y(80度);
}
}
.スイング{
表示: インラインブロック;
幅: 215ピクセル;
パディング: 10px 0 10px 15px;
フォントファミリ: "Open Sans"、sans;
フォントの太さ: 400;
色: #377D6A;
背景: #efefef;
境界線: 0;
境界線の半径: 3px;
アウトライン: 0;
text-indent: 60px; // 任意。
遷移: すべて .3 のイーズイン アウト。
&::-webkit-入力プレースホルダー {
色: #efefef;
テキストインデント: 0;
フォントの太さ: 300;
}
+ ラベル {
表示: インラインブロック;
位置: 絶対;
上: 0;
左: 0;
パディング: 10px 15px;
テキストシャドウ: 0 1px 0 rgba(19,74,70,.4);
背景: #7AB893;
左上の境界線の半径: 3px;
左下の境界線の半径: 3px;
変換の原点: 2px 2px;
変換: 回転(0);
// もっと良い方法があるはずだ
アニメーション: スイングバック .4 秒 1 イーズインアウト;
}
}
@keyframes スイング {
0% {
変換: 回転(0);
}
20% {
変換: 回転(116度);
}
40% {
変換: 回転(60度);
}
60% {
変換: 回転(98度);
}
80% {
変換: 回転(76度);
}
100% {
変換: 回転(82度);
}
}
@keyframes スイングバック {
0% {
変換: 回転(82度);
}
100% {
変換: 回転(0);
}
}
.swing:フォーカス、
.swing:アクティブ{
色: #377D6A;
テキストインデント: 0;
背景: #fff;
左上の境界線の半径: 0;
境界線の左下の半径: 0;
&::-webkit-入力プレースホルダー {
色: #aaa;
}
+ ラベル {
アニメーション: swing 1.4s 1 easy-in-out;
変換: 回転(82度);
}
}
.バルーン{
// https://twitter.com/dbox/status/365888496486985728 の提案どおり
表示: インラインブロック;
幅: 215ピクセル;
パディング: 10px 0 10px 15px;
フォントファミリ: "Open Sans"、sans;
フォントの太さ: 400;
色: #377D6A;
背景: #efefef;
境界線: 0;
境界線の半径: 3px;
アウトライン: 0;
text-indent: 60px; // 任意。
遷移: すべて .3 のイーズイン アウト。
&::-webkit-入力プレースホルダー {
色: #efefef;
テキストインデント: 0;
フォントの太さ: 300;
}
+ ラベル {
表示: インラインブロック;
位置: 絶対;
上: 8px;
左: 0;
下: 8px;
パディング: 5px 15px;
色: #032429;
フォントサイズ: 11px;
フォントの太さ: 700;
テキスト変換:大文字;
テキストシャドウ: 0 1px 0 rgba(19,74,70,0);
遷移: すべて .3 のイーズイン アウト。
境界線の半径: 3px;
背景: rgba(122,184,147,0);
＆：後 {
位置: 絶対;
コンテンツ： "";
幅: 0;
高さ: 0;
上: 100%;
左: 50%;
左マージン: -3px;
border-left: 3px 透明の実線;
border-right: 3px 透明の実線;
上境界線: 3px実線 rgba(122,184,147,0);
遷移: すべて .3 のイーズイン アウト。
}
}
}
.balloon:フォーカス、
.バルーン:アクティブ{
色: #377D6A;
テキストインデント: 0;
背景: #fff;
&::-webkit-入力プレースホルダー {
色: #aaa;
}
+ ラベル {
色: #fff;
テキストシャドウ: 0 1px 0 rgba(19,74,70,.4);
背景: rgba(122,184,147,1);
変換: translateY(-40px);
＆：後 {
上境界線: 4px実線 rgba(122,184,147,1);
}
}
}以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
>>: MySQL パフォーマンス最適化インデックス プッシュダウン
推薦する
MySQL 8.0.23 インストールの超詳細なチュートリアル
目次序文1. 公式サイトからMySQLをダウンロードする2. 解凍ファイルを設定する3. 初期化4....
ウェブサイト上のWeiboコンポーネントの再設計の詳細な紹介（写真とテキスト）
前面に書かれたWeibo コンポーネントは、サードパーティのアクセス ユーザーが開発を必要とせずに ...
Windows Server win2003、win2008R2、win2012、win2016、win2019 システム バージョン間の違い
最近、Microsoft は 2019 サーバー システムをリリースしました。一般的に、Micros...
MySQLがlocalhost経由でデータベースに接続できない問題に対する完璧な解決策
問題:あるサーバー上の PHP プログラムは、localhost アドレス経由でデータベースに接続で...
MySQL FAQ シリーズ: 一時テーブルを使用する場合
一時テーブルの概要一時テーブルとは: MySQL は中間結果セットを保存するために使用されます。一時...
ウェブページでmp3またはフラッシュプレーヤーコードを再生する
コードをコピーコードは次のとおりです。 <オブジェクト id="player1&qu...
docker run で ./ 相対パスを使用してファイルまたはディレクトリをマウントできない問題を解決する
docker-compose.yml ファイルで './' 相対パスを許可する バー...
ApacheのDjangoオンライン展開方法
環境： 1. Windows Server 2016 Datacenter 64 ビット 2. SQ...
基本的なウェブページパフォーマンス最適化ルールの簡単な概要
ブラウザのウェブページを最適化するためのいくつかのルールページの最適化静的リソース圧縮ビルド ツール...
マウスを動かしたときにセカンダリメニューバーを実装するために HTML+CSS を使用する例
この記事では、マウスを動かしたときにセカンダリ メニュー バーを実装するために HTML+CSS を...
Youku 動画から 30 秒の広告コードを削除する 2 つの方法
誰もがこんな気持ちになったことがあると思います。30 秒の広告が入った動画を見ると、とても不快に感じ...
優れたグラフィックデザイナーが習得すべき7つのスキル
1》ウェブデザインが得意であること2》Webページのデザイン方法を知る3》計画する4. SEOを理解...
MySQL 5.7.13 winx64 のインストールと設定方法のグラフィック チュートリアル (win10)
この記事では、参考までにMySQL 5.7.13 winx64のインストールと設定方法のグラフィック...
MySQL ストアド プロシージャの権限の問題の概要
MySQL ストアド プロシージャは、確かに、非常にまれな使用シナリオのように見えます。この問題は、...
HTML でスクロールバーを使用する際のヒントを共有する
今日、牛南ニュースリリースシステムについて学んでいたとき、牛南先生はスクロールバーに関するいくつかの...