html线框聚焦效果,24种表单input输入框聚焦动画特效

这是一组效果超酷的表单input输入框聚焦CSS3动画特效。这组特效共24种不同的聚焦动画效果，分为3个类别，分别是边框动画特效，背景动画特效和浮动标签动画特效。

这组输入框聚焦特效主要使用CSS3 :focus选择器来制作。:focus选择器允许我们在鼠标进入元素时为元素设置属性。

使用方法

HTML结构

下面是第一种聚焦效果的HTML结构：

CSS样式

col-3 class类用于布局，设置每一行分为3个列。

.col-3{

float: left;

width: 27.33%;

margin: 40px 3%;

position: relative;

}

然后为input元素设置一些通用样式。

input[type="text"]{

font: 15px/24px "Lato", Arial, sans-serif;

color: #333;

width: 100%;

box-sizing: border-box;

letter-spacing: 1px;

}

effect-1是24种聚焦效果中的第一种效果。它将input元素的边框设置为0，然后通过border-bottom属性为input元素设置底部的边框样式为1个像素的灰色实线。背景颜色为透明色。

.effect-1{

border: 0;

padding: 4px 0;

border-bottom: 1px solid #ccc;

background-color: transparent;

}

.focus-border是输入框聚焦后的边框样式。它采用绝对单位，位置在输入框的左下角位置，高度为2像素，开始时宽度被设置为0，不可见。并设置了0.4秒的过渡动画效果。

.effect-1 ~ .focus-border{

position: absolute;

bottom: 0;

left: 0;

width: 0;

height: 2px;

background-color: #3399FF;

transition: 0.4s;

}

当输入框聚焦时以及在输入框中有内容时，将.focus-border的宽度设置为100%。

.effect-1:focus ~ .focus-border,

.has-content.effect-1 ~ .focus-border{

width: 100%;

transition: 0.4s;

}

JavaScript

该输入框聚焦特效中使用一些jQuery代码来判断输入框中是否已近输入了内容，并为它添加和移除相应的class类。

$(window).load(function(){

$(".col-3 input").val("");

$(".input-effect input").focusout(function(){

if($(this).val() != ""){

$(this).addClass("has-content");

}else{

$(this).removeClass("has-content");

}

});

html线框聚焦效果,24种表单input输入框聚焦动画特效相关推荐

14款CSS3炫酷表单input输入框美化效果【附源码】
这是一款效果非常酷的CSS3表单input输入框美化效果插件.为表单的input输入框制作一些特殊的效果能给用户带来更好的用户体验.这个CSS3表单input输入框美化插件就是一个很好的例子.这个插件 ...
HTML form表单 input输入框
记录: form标签的作用是在页面引入一个表单,该表单可以直接将数据提交给服务器.action属性用来设置提交的服务器地址描述: input输入框.通过type属性可以设置不同类型的输入框. 解决方 ...
html input禁止驶入,layui form表单 input输入框获取焦点后阻止Enter回车自动提交 – 执念 – 博客园...
最简单的解决办法,不影响其他操作,给提交按钮增加 type="button" 属性完美解决立即提交 layui表格编辑状态下回车进入下一单元格 $(document).keyu ...
date格式化输出 24小时 java_java - 将日期时间转换为24小时表单
java - 将日期时间转换为24小时表单我从服务器获得的时间就像Jul 27, 2011 8:35:29 AM. 我想将其转换为2011-07-27 08:35:29. 我还希望转换时间为24小时 ...
post 表单中常见的四种表单请求方式
//post 表单中常见的四种表单请求方式 typedef enum { postformURLEncoded, /*对应Content-Type: appli ...
CSS3 过渡特性创建信封效果的联系表单
最近给大家分享 CSS3 效果比较多,都是充分运用了 CSS3 来实现的.通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享使用 CSS3 过渡特性实现的信 ...
java 文本域不可编辑_实现表单input文本框不可编辑的三种方法
问题有时,我们需要以不可编辑的模式显示表单域,那么如何实现?我们可以通过为表单字段(input文本框,标签,复选框,文本区域)设置以下方法来实现表单的不可编辑功能. 实现方式 1.οnfοcus=t ...
表单input标签type属性详解
目标:详解表单input标签type属性常用的属性值一.input标签和它的type属性 PS:input 元素可以用来生成一个供用户输入数据的简单文本框. 在默认的情况下, 什么样的数据均可以输入 ...
html表单框内文字点击消失,jQuery 使用label实现点击表单input，提示文字消失的示例...
感兴趣的小伙伴,下面一起跟随512笔记的小编罗X来看看吧. 很多网站在填写表单的时候,都可以看到这样一种UI,input[type=text]里面有提示的文字,当鼠标点进去之后提示文字就消失了.以前做 ...

html线框聚焦效果,24种表单input输入框聚焦动画特效

html线框聚焦效果,24种表单input输入框聚焦动画特效相关推荐

最新文章

热门文章