制作网页的时候，巧妙地加入一些小小的CSS3特效，页面会显得更加灵动活泼，下面来分享一个CSS3表单输入发光特效，效果如下图所示：
表单输入发光特效
以下是详细实现步骤：
第一步：
搭建结构，外层一个div，嵌套内部两个表单标签input，实际应用的时候可以在外层再嵌套一个form标签。
代码如下:
<div class="search">
<input type="text">
<input type="submit" value="search">
</div>
第二步：
书写静态CSS样式，注意背景颜色和表单元素配色和谐，给input添加统一的渐变背景色和边框。
代码如下：
<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>
这一步已经实现了表单的默认效果，如下图所示：
默认效果
第三步：
最后一步，给表单添加输入时的发光效果。
设置type类型为text的input得到焦点，即focus的样式为亮度较高的颜色为投影并设置为动画，动画修改投影的不透明度，实现闪烁。
设置type类型为submit的input鼠标移上hover的时候，修改边框的颜色。
代码如下：
<style>
/* 设置表单得到焦点的样式 */
.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表单输入发光特效</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;
}
/* 设置表单得到焦点的样式 */
.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>
网友评论