純粋な 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 パフォーマンス最適化インデックス プッシュダウン
推薦する
Bash の山括弧の深い理解 (初心者向け)
序文Bash には、ls、cd、mv などの重要な組み込みコマンドが多数あるほか、grep、awk、...
elementui の el-popover スタイルの変更が有効にならない問題の解決策
element-uiを使用する場合、el-popoverというよく使われるコンポーネントがありますが...
Linux manコマンドの具体的な使い方
01. コマンドの概要Linux には充実したヘルプ マニュアルが用意されています。コマンドのパラメ...
Centos7 での python3 のインストールとアンインストールに関するチュートリアル
1. Python 3をインストールする1. 依存パッケージをインストールしますyum instal...
ウェブページのカラーマッチング例分析: 緑色のカラーマッチングウェブページ分析
<br />緑は黄色と青（寒色と暖色）の中間の色で、より穏やかな色です。そのため、緑は最...
MySQL 5.7 でデータベースのデータ保存場所を変更する方法
MySQL データベースに保存されるデータが徐々に増加すると、元のストレージ領域がいっぱいになり、M...
複雑なウェブサイトのナビゲーションを簡素化
<br />ナビゲーション設計は構造設計における主要なタスクの 1 つです。ソフトウェア...
Nginx ロードバランシングの設定方法
目次Nginx 負荷分散構成Nginx 負荷分散戦略ポーリング（デフォルト）重さip_ハッシュ公正（...
Vue ログインページでクッキーを使用してパスワードを 7 日間記憶する方法
問題の説明プロジェクトのログインページでは、7日間パスワードを記憶する必要がある機能があります。この...
Vue.js での $emit の使用に関する詳細な説明
1. 親コンポーネントは props を使用して子コンポーネントにデータを渡すことができます。 2....
MySQLの共有ロックと排他ロックの使用例の分析
この記事では、例を使用して MySQL の共有ロックと排他ロックの使用方法を説明します。ご参考までに...
ウェブページに埋め込まれた Flash と IE、FF、Maxthon の互換性の問題
いろいろ苦労した後、インターネットで検索したり、以前の会社のプロジェクトを探したり、他の人のプロジェ...
Rails APIを使用してReactアプリケーションを構築するための詳細な手順
目次バックエンド: Rails API部分フロントエンド: React部分Reactコンポーネントa...
Nginx を使用してポート転送 TCP プロキシを実装する例
目次需要背景Nginx を使用する理由は何ですか? Nginx によるポート転送依存関係をインストー...
要素のフォームコンポーネントに関する注意事項
要素フォームとコード表示詳細はエレメントフォーム公式サイトをご覧ください構造と機能の分析紹介とソース...