14种酷炫的input特效样式

14种酷炫的input特效动画样式，每一种都有不同风格的动画效果，可以自由修改颜色、大小、动画效果等等，也可以增加或删除动画元素，喜欢的可以直接收下哦。

分类：表单代码 > 输入框难易：入门级

查看演示下载资源下载积分： 20 积分

页面的head部分需要先引入多个CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/normalize.css" />
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link type="text/css" rel="stylesheet" href="css/component.css" />

由于页面的body部分有14个以上的元素容器，所以，这里仅贴出部分代码，其余的结构基本类似的：

<section class="content bgcolor-1">
	<h2 class="nomargin-bottom">特效样式1</h2>
	<span class="input input--haruki">
		<input class="input__field input__field--haruki" type="text" id="input-1" />
		<label class="input__label input__label--haruki" for="input-1">
			<span class="input__label-content input__label-content--haruki">用户名</span>
		</label>
	</span>
	<span class="input input--haruki">
		<input class="input__field input__field--haruki" type="text" id="input-2" />
		<label class="input__label input__label--haruki" for="input-2">
			<span class="input__label-content input__label-content--haruki">密码</span>
		</label>
	</span>
	<span class="input input--haruki">
		<input class="input__field input__field--haruki" type="text" id="input-3" />
		<label class="input__label input__label--haruki" for="input-3">
			<span class="input__label-content input__label-content--haruki">邮箱</span>
		</label>
	</span>
</section>
<section class="content">
	<h2>特效样式2</h2>
	<span class="input input--hoshi">
		<input class="input__field input__field--hoshi" type="text" id="input-4" />
		<label class="input__label input__label--hoshi input__label--hoshi-color-1" for="input-4">
			<span class="input__label-content input__label-content--hoshi">用户名</span>
		</label>
	</span>
	<span class="input input--hoshi">
		<input class="input__field input__field--hoshi" type="text" id="input-5" />
		<label class="input__label input__label--hoshi input__label--hoshi-color-2" for="input-5">
			<span class="input__label-content input__label-content--hoshi">密码</span>
		</label>
	</span>
	<span class="input input--hoshi">
		<input class="input__field input__field--hoshi" type="text" id="input-6" />
		<label class="input__label input__label--hoshi input__label--hoshi-color-3" for="input-6">
			<span class="input__label-content input__label-content--hoshi">邮箱</span>
		</label>
	</span>
</section>

页面底部引入javascript文件classie.js，并设置好其他的元素响应事件，代码如下：

<script type="text/javascript" src="js/classie.js"></script>
<script>
	(function() {
		if (!String.prototype.trim) {
			(function() {
				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 ) {
			if( inputEl.value.trim() !== '' ) {
				classie.add( inputEl.parentNode, 'input--filled' );
			}

			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' );
			}
		}
	})();
</script>