純粋な 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 パフォーマンス最適化インデックス プッシュダウン
推薦する
複数サーバーの負荷分散を実現するためのNginx構成
Nginx ロード バランシング サーバー: IP: 192.168.0.4 (Nginx-Serv...
json.stringify() と json.parse() の違いと使い方
1. JSON.stringify() と JSON.parse() の違い私たちは皆、JSON.s...
KTLツールはMySQLからMySQLへのデータの同期方法を実現します
ktl ツールを使用して、mysql から mysql にデータを同期します。 1. 新しいジョブス...
入力[type=file]の起動が遅くて動かなくなる問題を素早く解決します
入力タグタイプがファイルで、タグ内にaccpet="image/*"属性が設定さ...
Docker Compose で環境変数を参照する方法の例
プロジェクトでは、さまざまな条件や使用シナリオを制御するために、docker-compose.yml...
Win10 での MySQL 8.0.15 のインストールと設定のチュートリアル
最近私が学んでいるのは MySQL の知識なので、MySQL をインストールすることが非常に重要です...
フレックスレイアウトを使用してページレイアウトを簡単に実装するためのサンプルコード
では、早速コードを見てみましょう。 1. 上部、中央、下部のレイアウト: <!DOCTYPE ...
ボタンのタイプが送信として指定されていません。ボタンをクリックしても、指定された URL にジャンプしません。
現在、プロジェクトの要件により、フォームの送信を制御し、送信前にデータを検証および処理するために j...
mysql 8.0.20 winx64.zip 圧縮版のインストールと設定方法のグラフィックチュートリアル
mysql 8.0.20 winx64.zip圧縮版のインストールチュートリアルは以下のように記録さ...
Vueはボールのスライディングクロス効果を実現します
この記事の例では、ボールのスライドとクロスの効果を実現するためのVueの具体的なコードを共有していま...
display または visibility を通じて HTML 要素を表示または非表示にする
場合によっては、特定の条件に基づいて Web ページ内の HTML 要素を表示するか非表示にするかを...
jQueryはショッピングカート機能を実装します
この記事の例では、ショッピングカート機能を実装するためのjQueryの具体的なコードを参考までに共有...
js キャンバスで円形の水のアニメーションを実現
この記事の例では、円形の水のアニメーションを実現するためのキャンバスの具体的なコードを参考までに共有...
パーソナライズされた検索エンジンを使用して、必要なパーソナライズされた情報を検索します
現在、多くの人がインターネット上で生活しており、インターネットで情報を検索することは日常的な作業とな...
jQueryはすべてのショッピングカート機能を実装します
目次1. すべて選択2. 商品の数量を増やすか減らす3. 商品の小計を変更する4. 合計と合計額を計...