咨询热线：020-85648757     客服：020-85648755 85646535
【南方网景】是提供网站建设、网页设计、推广优化和软件开发的互联网综合服务商
点击这里给我发消息
点击这里给我发消息
点击这里给我发消息 点击这里给我发消息
文章中心
+ 新闻中心
+ 网站建设
+ 网页设计
+ 平面动画
+ 网站开发
+ 数据库开发
+ 安全维护
+ 网站安全
+ 软件开发
首页 > 行业资讯 > Javascript>详细内容

CSS3动画搜索框

添加时间：2014-4-10
    相关阅读: CSS 项目



       在这篇文章告诉你如何用CSS3创建各种颜色动画搜索框。你可以简单地将代码复制，并用它在您的Web项目。
#searchform { float:left; margin-left:20px; margin:9px 0px 0px; padding:0px; }
    #searchform fieldset { padding:0px; border:none; margin:0px; }
    #searchform input[type="text"] {
        background:#e8e8e8;
        border:none;
        float:left;
        padding:0px 10px 0px 15px;
        margin:0px;
        width:150px;
        height:38px;
        line-height:38px;
        transition:all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
        -moz-transition:all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
        -webkit-transition:all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
        -o-transition:all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
        color:#585858;
    }
    #searchform input[type="text"]:hover, #searchform input[type="text"]:focus { width:200px; }
    #searchform input[type="submit"] { background:url(icon-search.png) center 11px no-repeat; cursor:pointer; margin:0px; padding:0px; width:37px; height:38px; line-height:38px; }
 
    input[type="submit"] { padding:4px 17px; color:#ffffcolor:#585858; ff; text-transform:uppercase; border:none; font-size:20px; background:url(gradient.png) bottom repeat-x; cursor:pointer; margin-top:10px; float:left; overflow:visible; transition: all .3s linear; -moz-transition: all .3s linear; -o-transition: all .3s linear; -webkit-transition: all .3s linear; }
 
    #searchform input[type="submit"]:hover { background-color:#333232; }
        #searchform input[type='submit'] { background-color:#25ade4; }
 
<form method="get" id="searchform" action="http://w3lessons.info">
    <fieldset>
    <input id="s" name="s" type="text"
            value="Enter Keyword" class="text_input"
            onblur="if(this.value==''){this.value='Enter Keyword';}"
            onfocus="if(this.value =='Enter Keyword') {this.value=''; }" />
    <input name="submit" type="submit"  value="" />
    </fieldset>
</form>
相关CSS3动画搜索框

快速导航：南方网景 IT新闻 资源中心 网页设计 网站建设 软件开发 网站案例 网站制作 开发工具 网站报价 推广优化 域名注册 虚拟主机 付款方式 联系我们 关于我们
咨询热线：020-85648757 85648755 85648616 0755-27912581 客服：020-85648756 0755-27912581 业务传真：020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址：广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址：深圳市宝源路华丰宝源大厦606
研发中心：广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册