14种酷炫的input特效动画样式,每一种都有不同风格的动画效果,可以自由修改颜色、大小、动画效果等等,也可以增加或删除动画元素,喜欢的可以直接收下哦。
页面的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791