這是一組效果超酷的表單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输入框聚焦动画特效的全部內容，希望文章能夠幫你解決所遇到的問題。

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