特效描述：文本框輸入動畫 動畫特效。幾個更鼓舞人心的風格為文本框輸入動畫包括一些新技術和新思想。

代碼結構

1. 引入CSS

2. 引入JS

3. HTML代碼

Manami

Username

Website

Invitation Code

Nariko

Username

Website

Invitation Code

Nao

Username

Email

Invitation Code

Yoshiko

Bird's Color

Wing Span

Beak Length

Shoko

Player Name

Village

World

Chisato

First Name

Middle Name

Last Name

Makiko

Search

Sae

Email Address

Invitation Code

Full Name

Kozakura

Name

Email

Website

Fumi

Course Name

Degree

Work Place

Ruri

Username

Website

Invitation Code

Kohana

Time

Line

Phone

(function() {

// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim

if (!String.prototype.trim) {

(function() {

// Make sure we trim BOM and NBSP

var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;

String.prototype.trim = function() {

return this.replace(rtrim, '');

};

})();

}

[].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {

// in case the input is already filled..

if( inputEl.value.trim() !== '' ) {

classie.add( inputEl.parentNode, 'input--filled' );

}

// events:

inputEl.addEventListener( 'focus', onInputFocus );

inputEl.addEventListener( 'blur', onInputBlur );

} );

function onInputFocus( ev ) {

classie.add( ev.target.parentNode, 'input--filled' );

}

function onInputBlur( ev ) {

if( ev.target.value.trim() === '' ) {

classie.remove( ev.target.parentNode, 'input--filled' );

}

}

})();

總結

以上是生活随笔為你收集整理的html ip输入框效果,html5 input文本框输入动画特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。