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;

<