CSS3实战开发：手把手教大家搜索表单发光特效实战开发 -

陌上花会开

浏览: 39570 次
性别:
来自: 苏州

最近访客更多访客>>

116856645

cgt地方

角落0124

onlymyme

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS3实战开发：手把手教大家搜索表单发光特效实战开发

博客分类：

css3
div+css

animation css css3 动画特效

各位网友，大家好，我是陌上花会开，今天这个案例，我将带领大家,手把手教大家开发一个会发光的表单组，还是先秀运行效果图吧：

从这个效果图，大家可以发现，当光标在某个组件上时，它就会发光，今天我将带领大家实战开发这个特效。

PS: 大家可以直接将博客中的代码复制到本地便可得到同样的运行效果。

首先，我们先准备好html代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8"><meta name="keywords" content="css3教程,css3实战开发,css3案例,css3特效,互联网" >
<link rel="stylesheet" href="styles.css">
<title>CSS3实战开发之发光控件的实现</title>
</head>

<body>

<div class="container">
    <form method="post" action="http://www.itdriver.cn">
        <div class="input-group">
            <input type="text" placeholder="请告诉我，你在寻找什么" >
            <span class="input-group-btn">
                <button class="btn" type="submit">立即搜索</button>
            </span>
        </div>
    </form>
</div>
</body>
</html>

此时，我们先看一下此时未加样式时的运行效果：

接着我们再设置页面外部容器的样式：

@charset "utf-8";
*{ /*清除所有元素默认内边距和外边距*/
    padding:0;
    margin:0;    
}

/* 设置外部容器样式 开始 */
.container{ 
    width:80%;
    margin:auto;    
}

.container form{
    margin:10em;    
}

form { font-size:.8em; }
/* 设置外部容器样式 结束 *

在修改完表单布局以及内外边距后，我们再设置表单组input-group及其内部元素的样式：

.input-group input { /*设置表单组中输入框的样式*/
    height:3em;
    line-height:3em;
    width:20em;
    
    border:1px solid #cccccc;
    
    border-top-left-radius:1.5em;
    border-bottom-left-radius:1.5em;
    padding-left:1.2em;
}

.btn{ /* 设置按钮样式的内边距 */
    padding:0 .5em;
}


.input-group .input-group-btn .btn{ /* 设置表单组中按钮的样式 */
    height:3.12em;
    border:1px solid #cccccc;
    
    border-top-right-radius:1.5em;
    border-bottom-right-radius:1.5em;
    
    border-left:none;
}

/*设置表单组元素统一向左浮动*/
.input-group input,.input-group button{
    float:left;
}

此时我们来预览一下表单应用样式后的效果：

从效果图我们可以发现，搜索表单组的样式已经出来了，但是并不是我们期待的发光效果。

我们要知道如果单凭CSS2或CSS1，是实现不了发光动画效果的，这个时候我们可以借助CSS3的动画效果。

现在我们利用CSS3新增动画特性，定义动画帧：

/* 定义动画帧 开始 */
@-webkit-keyframes glow {
    0% {
        border-color: #cccccc;
        box-shadow: 0 0 5px rgba(102,153,255,.2), inset 0 0 5px rgba(102,153,255,.1);
    }    
    100% {
        border-color: #66FFFF;
        box-shadow: 0 0 20px rgba(102,153,255,.6), inset 0 0 10px rgba(102,153,255,.4);
    }
}

@-moz-keyframes glow {
    0% {
        border-color: #cccccc;
        box-shadow: 0 0 5px rgba(102,153,255,.2), inset 0 0 5px rgba(102,153,255,.1);
    }    
    100% {
        border-color: #66FFFF;
        box-shadow: 0 0 20px rgba(102,153,255,.6), inset 0 0 10px rgba(102,153,255,.4);
    }
}

@-o-keyframes glow {
    0% {
        border-color: #cccccc;
        box-shadow: 0 0 5px rgba(102,153,255,.2), inset 0 0 5px rgba(102,153,255,.1);
    }    
    100% {
        border-color: #66FFFF;
        box-shadow: 0 0 20px rgba(102,153,255,.6), inset 0 0 10px rgba(102,153,255,.4);
    }
}

@-ms-keyframes glow {
    0% {
        border-color: #cccccc;
        box-shadow: 0 0 5px rgba(102,153,255,.2), inset 0 0 5px rgba(102,153,255,.1);
    }    
    100% {
        border-color: #66FFFF;
        box-shadow: 0 0 20px rgba(102,153,255,.6), inset 0 0 10px rgba(102,153,255,.4);
    }
}

@keyframes glow {
    0% {
        border-color: #cccccc;
        box-shadow: 0 0 5px rgba(102,153,255,.2), inset 0 0 5px rgba(102,153,255,.1);
    }    
    100% {
        border-color: #66FFFF;
        box-shadow: 0 0 20px rgba(102,153,255,.6), inset 0 0 10px rgba(102,153,255,.4);
    }
}
/* 定义动画帧 结束 */

我在一开始也讲了，当表单组中的元素或组件获得焦点的时候，该元素或组件有发光效果。

此时我们给表单组中的元素应用获得焦点时的样式：

.input-group input:focus,
.input-group .input-group-btn .btn:focus{ /*当表单组中组件获得焦点的时候，执行动画*/
    outline:none;
    -webkit-animation: glow 800ms ease-out infinite alternate;
    -moz-animation: glow 800ms ease-out infinite alternate;
    -o-animation: glow 800ms ease-out infinite alternate;
    -ms-animation: glow 800ms ease-out infinite alternate;
    animation: glow 800ms ease-out infinite alternate;
}

至此，《搜索表单发光特效》的代码已经讲解完了。再来看下效果：

大家说是不是很简单呢？我们很多人可能知识点掌握的不少，只是不知道怎么来用。

好，请大家继续关注我的博客，我会不断地教大家如何将这些知识点串起来，来开发实战性的应用。

往期精彩实战开发案例一览(已被广为转载，下面只列出部分)：

　　1. 《CSS3实战开发: 弹性盒模型之响应式WEB界面设计》

　　2. 《CSS3线性渐变技术详解及超炫按钮实战开发》

　　3. 《CSS3 2D转换之translate技术详解及网页导航实战开发》

　　4. 《CSS3实战开发:手把手教你照片墙实战开发》

　　5. 《CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效》

　　6. 《CSS3实战开发:仿天猫首页图片展示动画特效实战开发》

　　7. 《CSS3实战开发:手把手教大家折角效果实战开发》

欢迎大家加入互联网技术交流群：62329335