好看的html文本框输入页面,纯CSS3实现漂亮的input输入框动画样式库(Text input love)...

分享一个用纯 CSS3 实现的，漂亮的 input 输入框动画样式库-Text input love。

点击每个输入框都用不同的动画效果，始终显示标签label，并显示 placeholder(占位符)文本。

HTML 代码：

Click every input.

Name

Email

Phone

Age

Height

Weight

Class

Element

Move

English

Burger

Wallet

Credit Card

Expires

Security Code

Knock knock

Max

Maxed out card ;)

Artist

Song

Eyes

State

Planet

Galaxy

SCSS 代码：

Sass 代码:

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300,800);

* {

box-sizing: border-box;

}

html,

body {

overflow-x: hidden;

font-family: "Open Sans", sans-serif;

font-weight: 300;

color: #fff;

background: #efefef;

}

@mixin epic-sides() { // https://codepen.io/MichaelArestad/pen/qltuk

position: relative;

z-index: 1;

&:before {

position: absolute;

content: "";

display: block;

top: 0;

left: -5000px;

height: 100%;

width: 15000px;

z-index: -1;

@content;

}

}

.row {

max-width: 800px;

margin: 0 auto;

padding: 60px 30px;

background: #032429;

@include epic-sides() {background: inherit;}

text-align: center;

&:first-child {

padding: 40px 30px;

}

&:nth-child(2),

&:nth-child(8),

&:nth-child(10){

background: #134A46;

}

&:nth-child(3),

&:nth-child(7) {

background: #377D6A;

}

&:nth-child(4),

&:nth-child(6) {

background: #7AB893;

}

&:nth-child(5) {

background: #B2E3AF;

}

span {

position: relative;

display: inline-block;

margin: 30px 10px;

}

}

.basic-slide {

display: inline-block;

width: 215px;

padding: 10px 0 10px 15px;

font-family: "Open Sans", sans;

font-weight: 400;

color: #377D6A;

background: #efefef;

border: 0;

border-radius: 3px;

outline: 0;

text-indent: 70px; // Arbitrary.

transition: all .3s ease-in-out;

&::-webkit-input-placeholder {

color: #efefef;

text-indent: 0;

font-weight: 300;

}

+ label {

display: inline-block;

position: absolute;

top: 0;

left: 0;

padding: 10px 15px;

text-shadow: 0 1px 0 rgba(19,74,70,.4);

background: #7AB893;

transition: all .3s ease-in-out;

border-top-left-radius: 3px;

border-bottom-left-radius: 3px;

}

}

.basic-slide:focus,

.basic-slide:active {

color: #377D6A;

text-indent: 0;

background: #fff;

border-top-left-radius: 0;

border-bottom-left-radius: 0;

&::-webkit-input-placeholder {

color: #aaa;

}

+ label {

transform: translateX(-100%);

}

}

.clean-slide {

position: relative;

display: inline-block;

width: 215px;

padding: 10px 0 10px 15px;

font-family: "Open Sans", sans;

font-weight: 400;

color: #377D6A;

background: #efefef;

border: 0;

border-radius: 3px;

outline: 0;

text-indent: 60px; // Arbitrary.

transition: all .3s ease-in-out;

&::-webkit-input-placeholder {

color: #efefef;

text-indent: 0;

font-weight: 300;

}

+ label {

display: inline-block;

position: absolute;

transform: translateX(0);

top: 0;

left: 0;

bottom: 0;

padding: 13px 15px;

font-size: 11px;

font-weight: 700;

text-transform: uppercase;

color: #032429;

text-align: left;

text-shadow: 0 1px 0 rgba(255,255,255,.4);

transition: all .3s ease-in-out, color .3s ease-out;

border-top-left-radius: 3px;

border-bottom-left-radius: 3px;

overflow: hidden;

&:after {

content: "";

position: absolute;

top: 0;

right: 100%;

bottom: 0;

width: 100%;

background: #7AB893;

z-index: -1;

transform: translate(0);

transition: all .3s ease-in-out;

border-top-left-radius: 3px;

border-bottom-left-radius: 3px;

}

}

}

.clean-slide:focus,

.clean-slide:active {

color: #377D6A;

text-indent: 0;

background: #fff;

border-top-left-radius: 0;

border-bottom-left-radius: 0;

&::-webkit-input-placeholder {

color: #aaa;

}

+ label {

color: #fff;

text-shadow: 0 1px 0 rgba(19,74,70,.4);

transform: translateX(-100%);

&:after {

transform: translate(100%);

}

}

}

.gate {

display: inline-block;

width: 215px;

padding: 10px 0 10px 15px;

font-family: "Open Sans", sans;

font-weight: 400;

color: #377D6A;

background: #efefef;

border: 0;

border-radius: 3px;

outline: 0;

text-indent: 65px; // Arbitrary.

transition: all .3s ease-in-out;

&::-webkit-input-placeholder {

color: #efefef;

text-indent: 0;

font-weight: 300;

}

+ label {

display: inline-block;

position: absolute;

top: 0;

left: 0;

padding: 10px 15px;

text-shadow: 0 1px 0 rgba(19,74,70,.4);

background: #7AB893;

transition: all .4s ease-in-out;

border-top-left-radius: 3px;

border-bottom-left-radius: 3px;

transform-origin: left bottom;

z-index: 99;

&:before,

&:after {

content: "";

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

border-radius: 3px;

background: #377D6A;

transform-origin: left bottom;

transition: all .4s ease-in-out;

pointer-events: none;

z-index: -1;

}

&:before {

background: rgba(3,36,41,.2);

z-index: -2;

right: 20%;

}

}

}

span:nth-child(2) .gate {

text-indent: 85px;

}

span:nth-child(2) .gate:focus,

span:nth-child(2) .gate:active{

text-indent: 0;

}

.gate:focus,

.gate:active {

color: #377D6A;

text-indent: 0;

background: #fff;

border-top-right-radius: 3px;

border-bottom-right-radius: 3px;

&::-webkit-input-placeholder {

color: #aaa;

}

+ label {

transform: rotate(-66deg);

border-radius: 3px;

&:before {

transform: rotate(10deg);

}

}

}

.skinny {

display: inline-block;

width: 215px;

padding: 10px 0 10px 15px;

font-family: "Open Sans", sans;

font-weight: 400;

color: #377D6A;

background: #efefef;

border: 0;

border-radius: 3px;

outline: 0;

text-indent: 75px; // Arbitrary.

transition: all .3s ease-in-out;

&::-webkit-input-placeholder {

color: #efefef;

text-indent: 0;

font-weight: 300;

}

+ label {

display: inline-block;

position: absolute;

transform: translateX(0);

top: 0;

left: 0;

padding: 10px 15px;

text-shadow: 0 1px 0 rgba(19,74,70,.4);

transition: all .3s ease-in-out;

border-top-left-radius: 3px;

border-bottom-left-radius: 3px;

overflow: hidden;

&:before,

&:after {

content: "";

position: absolute;

right: 0;

left: 0;

z-index: -1;

transition: all .3s ease-in-out;

}

&:before {

// Skinny bit here

top: 5px;

bottom: 5px;

background: #377D6A; // change this to #134A46

border-top-left-radius: 3px;

border-bottom-left-radius: 3px;

}

&:after {

top: 0;

bottom: 0;

background: #377D6A;

}

}

}

.skinny:focus,

.skinny:active {

color: #377D6A;

text-indent: 0;

background: #fff;

&::-webkit-input-placeholder {

color: #aaa;

}

+ label {

transform: translateX(-100%);

&:after {

transform: translateX(100%);

}

}

}

.slide-up {

display: inline-block;

width: 215px;

padding: 10px 0 10px 15px;

font-family: "Open Sans", sans;

font-weight: 400;

color: #377D6A;

background: #efefef;

border: 0;

border-radius: 3px;

outline: 0;

text-indent: 80px; // Arbitrary.

transition: all .3s ease-in-out;

&::-webkit-input-placeholder {

color: #efefef;

text-indent: 0;

font-weight: 300;

}

+ label {

display: inline-block;

position: absolute;

transform: translateX(0);

top: 0;

left: 0;

padding: 10px 15px;

text-shadow: 0 1px 0 rgba(19,74,70,.4);

transition: all .3s ease-in-out;

border-top-left-radius: 3px;

border-bottom-left-radius: 3px;

overflow: hidden;

&:before,

&:after {

content: "";

position: absolute;

right: 0;

left: 0;

z-index: -1;

transition: all .3s ease-in-out;

}

&:before {

// Skinny bit here

top: 6px;

left: 5px;

right: 5px;

bottom: 6px;

background: #377D6A; // change this to #134A46

}

&:after {

top: 0;

bottom: 0;

background: #377D6A;

}

}

}

span:nth-child(1) .slide-up {

text-indent: 105px;

}

span:nth-child(3) .slide-up {

text-indent: 125px;

}

span:nth-child(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 {

text-indent: 0;

}

.slide-up:focus,

.slide-up:active {

color: #377D6A;

text-indent: 0;

background: #fff;

&::-webkit-input-placeholder {

color: #aaa;

}

+ label {

transform: translateY(-100%);

&:before {

border-radius: 5px;

}

&:after {

transform: translateY(100%);

}

}

}

.card-slide {

display: inline-block;

width: 215px;

padding: 10px 0 10px 15px;

font-family: "Open Sans", sans;

font-weight: 400;

color: #377D6A;

background: #efefef;

border: 0;

border-radius: 3px;

outline: 0;

text-indent: 115px; // Arbitrary.

transition: all .3s ease-in-out;

&::-webkit-input-placeholder {

color: #efefef;

text-indent: 0;

font-weight: 300;

}

+ label {

display: block;

position: absolute;

top: 0;

left: 0;

padding: 10px 15px;

text-shadow: 0 1px 0 rgba(19,74,70,.4);

background: #7AB893;

transition: all .3s ease-in-out;

border-top-left-radius: 3px;

border-bottom-left-radius: 3px;

transform-origin: right center;

transform: perspective(300px) scaleX(1) rotateY(0deg);

}

}

span:nth-child(2) .card-slide {

text-indent: 55px;

}

span:nth-child(3) .card-slide {

text-indent: 150px;

}

span:nth-child(2) .card-slide:focus,

span:nth-child(2) .card-slide:active,

span:nth-child(3) .card-slide:focus,

span:nth-child(3) .card-slide:active {

text-indent: 0;

}

.card-slide:focus,

.card-slide:active {

color: #377D6A;

text-indent: 0;

background: #fff;

border-top-left-radius: 0;

border-bottom-left-radius: 0;

&::-webkit-input-placeholder {

color: #aaa;

}

+ label {

transform: perspective(600px) translateX(-100%) rotateY(80deg);

}

}

.swing {

display: inline-block;

width: 215px;

padding: 10px 0 10px 15px;

font-family: "Open Sans", sans;

font-weight: 400;

color: #377D6A;

background: #efefef;

border: 0;

border-radius: 3px;

outline: 0;

text-indent: 60px; // Arbitrary.

transition: all .3s ease-in-out;

&::-webkit-input-placeholder {

color: #efefef;

text-indent: 0;

font-weight: 300;

}

+ label {

display: inline-block;

position: absolute;

top: 0;

left: 0;

padding: 10px 15px;

text-shadow: 0 1px 0 rgba(19,74,70,.4);

background: #7AB893;

border-top-left-radius: 3px;

border-bottom-left-radius: 3px;

transform-origin: 2px 2px;

transform: rotate(0);

// There should be a better way

animation: swing-back .4s 1 ease-in-out;

}

}

@keyframes swing {

0% {

transform: rotate(0);

}

20% {

transform: rotate(116deg);

}

40% {

transform: rotate(60deg);

}

60% {

transform: rotate(98deg);

}

80% {

transform: rotate(76deg);

}

100% {

transform: rotate(82deg);

}

}

@keyframes swing-back {

0% {

transform: rotate(82deg);

}

100% {

transform: rotate(0);

}

}

.swing:focus,

.swing:active {

color: #377D6A;

text-indent: 0;

background: #fff;

border-top-left-radius: 0;

border-bottom-left-radius: 0;

&::-webkit-input-placeholder {

color: #aaa;

}

+ label {

animation: swing 1.4s 1 ease-in-out;

transform: rotate(82deg);

}

}

.balloon {

// As suggested by https://twitter.com/dbox/status/365888496486985728

display: inline-block;

width: 215px;

padding: 10px 0 10px 15px;

font-family: "Open Sans", sans;

font-weight: 400;

color: #377D6A;

background: #efefef;

border: 0;

border-radius: 3px;

outline: 0;

text-indent: 60px; // Arbitrary.

transition: all .3s ease-in-out;

&::-webkit-input-placeholder {

color: #efefef;

text-indent: 0;

font-weight: 300;

}

+ label {

display: inline-block;

position: absolute;

top: 8px;

left: 0;

bottom: 8px;

padding: 5px 15px;

color: #032429;

font-size: 11px;

font-weight: 700;

text-transform: uppercase;

text-shadow: 0 1px 0 rgba(19,74,70,0);

transition: all .3s ease-in-out;

border-radius: 3px;

background: rgba(122,184,147,0);

&:after {

position: absolute;

content: "";

width: 0;

height: 0;

top: 100%;

left: 50%;

margin-left: -3px;

border-left: 3px solid transparent;

border-right: 3px solid transparent;

border-top: 3px solid rgba(122,184,147,0);

transition: all .3s ease-in-out;

}

}

}

.balloon:focus,

.balloon:active {

color: #377D6A;

text-indent: 0;

background: #fff;

&::-webkit-input-placeholder {

color: #aaa;

}

+ label {

color: #fff;

text-shadow: 0 1px 0 rgba(19,74,70,.4);

background: rgba(122,184,147,1);

transform: translateY(-40px);

&:after {

border-top: 4px solid rgba(122,184,147,1);

}

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。