CSS3动画搜索框
在线演示
#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动画搜索框
5. CSS3动画效果入门
6. 基于Edge Animate可视化工具开发CSS3动画
本文来源:https://www.51html5.com/a993.html
﹝CSS3动画搜索框﹞相关内容
- 视频教程:CSS3动画属性实用技巧教程
- jQuery+CSS3动画框架magic
- jQuery+CSS3动画的水平组合布局
- 16款创建CSS3动画的jQuery插件
- 10款jQuery/CSS3动画应用 超实用
- JX.Animate:腾讯开源的轻量级CSS3动画库
- 必应搜索美国版启用HTML5视频动画
- jquery搜索建议MagicSuggest
- jquery搜索建议MagicSuggest
- CSS动画集合 可直接生成动画代码 – AniCollection