制作網(wǎng)頁的時候，巧妙地加入一些小小的CSS3特效，頁面會顯得更加靈動活潑，下面來分享一個CSS3表單輸入發(fā)光特效逃贝，效果如下圖所示：
表單輸入發(fā)光特效
以下是詳細實現(xiàn)步驟：
第一步：
搭建結(jié)構(gòu)茸时，外層一個div渣锦，嵌套內(nèi)部兩個表單標簽input，實際應(yīng)用的時候可以在外層再嵌套一個form標簽织鲸。
代碼如下:
<div class="search">
<input type="text">
<input type="submit" value="search">
</div>
第二步：
書寫靜態(tài)CSS樣式句占，注意背景顏色和表單元素配色和諧沪摄，給input添加統(tǒng)一的漸變背景色和邊框。
代碼如下：
<style>
*{
padding: 0;
margin: 0;
border: 0;
list-style: none;
}
body{
background:#191919;
}
.search{
width: 330px;
height: 50px;
margin:200px auto;
}
.search input{
box-sizing: border-box;
float: left;
background: linear-gradient(180deg,#313131,#222222);
color:#fff;
font-size:16px;
outline:none;
}
.search input[type=text]{
width: 250px;
height: 50px;
border-radius:5px 0 0 5px;
padding-left: 10px;
border:1px solid #444444;
}
.search input[type=submit]{
width:80px;
height: 50px;
border-radius:0 5px 5px 0;
border:1px solid #444444;
border-left: 0;
cursor: pointer;
}
</style>
這一步已經(jīng)實現(xiàn)了表單的默認效果，如下圖所示：
默認效果
第三步：
最后一步杨拐，給表單添加輸入時的發(fā)光效果祈餐。
設(shè)置type類型為text的input得到焦點，即focus的樣式為亮度較高的顏色為投影并設(shè)置為動畫戏阅，動畫修改投影的不透明度昼弟，實現(xiàn)閃爍。
設(shè)置type類型為submit的input鼠標移上hover的時候奕筐，修改邊框的顏色。
代碼如下：
<style>
/* 設(shè)置表單得到焦點的樣式 */
.search input[type=text]:focus{
/* 明亮的邊框 */
border: 1px solid #00d9ff;
/* 閃爍的動畫 */
animation:flash 2s linear infinite;
}
/* 添加不同透明度的投影 */
@keyframes flash{
0%{box-shadow:0 0 6px #00d9ff; opacity: 1;}
50%{box-shadow:0 0 6px #00d9ff; opacity: 0.3;}
100%{box-shadow:0 0 6px #00d9ff; opacity: 1;}
}
/* 提交按鈕鼠標移上文字顏色高亮 */
.search input[type=submit]:hover{
color:#00d9ff;
}
</style>
最后
完整版代碼如下变骡，需要的打包走哈~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3表單輸入發(fā)光特效</title>
<style>
*{
padding: 0;
margin: 0;
border: 0;
list-style: none;
}
body{
background:#191919;
}
.search{
width: 330px;
height: 50px;
margin:200px auto;
}
.search input{
box-sizing: border-box;
float: left;
background: linear-gradient(180deg,#313131,#222222);
color:#fff;
font-size:16px;
outline:none;
}
.search input[type=text]{
width: 250px;
height: 50px;
border-radius:5px 0 0 5px;
padding-left: 10px;
border:1px solid #444444;
}
.search input[type=submit]{
width:80px;
height: 50px;
border-radius:0 5px 5px 0;
border:1px solid #444444;
border-left: 0;
cursor: pointer;
}
/* 設(shè)置表單得到焦點的樣式 */
.search input[type=text]:focus{
/* 明亮的邊框 */
border: 1px solid #00d9ff;
/* 閃爍的動畫 */
animation:flash 2s linear infinite;
}
/* 添加不同透明度的投影 */
@keyframes flash{
0%{box-shadow:0 0 6px #00d9ff; opacity: 1;}
50%{box-shadow:0 0 6px #00d9ff; opacity: 0.3;}
100%{box-shadow:0 0 6px #00d9ff; opacity: 1;}
}
/* 提交按鈕鼠標移上文字顏色高亮 */
.search input[type=submit]:hover{
color:#00d9ff;
}
</style>
</head>
<body>
<div class="search">
<input type="text">
<input type="submit" value="search">
</div>
</body>
</html>
