CSS3教程

当前位置: HTML5技术网 > CSS3教程 > CSS3动画搜索框

CSS3动画搜索框


在线演示


       在这篇文章告诉你如何用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动画搜索框】相关文章

1. CSS3动画搜索框

2. 如何建立一个样式新颖的CSS3搜索框

3. CSS3动画效果-animate.css

4. 超实用!可视化CSS3动画生成神器Stylie

5. CSS3动画效果入门

6. 基于Edge Animate可视化工具开发CSS3动画

7. jQuery+CSS3动画框架magic

8. jQuery+CSS3动画的水平组合布局

9. 教你用CSS3动画实现的超炫过渡特效

10. 一个轻量级CSS3动画库:JX.Animate

本文来源:https://www.51html5.com/a993.html

点击展开全部

﹝CSS3动画搜索框﹞相关内容

「CSS3动画搜索框」相关专题

其它栏目

也许您还喜欢