当前位置:首页 > 网页特效 > css样式 >

CSS3仿苹果搜索框鼠标点击自动伸长

时间:2013-12-19 09:10 来源:互联网 作者:源码搜藏 收藏 推荐

运行代码 保存代码 复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
  • CSS3仿苹果网站的搜索框,鼠标点击输入框的时候搜索框自动伸长。代码中一共演示了三种不同效果的搜索框特效,不过大同小异,有的是鼠标点击时候高亮显示,有的是点击后拉升输入框,好像很智能的样子,没有使用其它的JS插件,完全CSS3自己的代码实现的,请在火狐或Chrome下看效果。
  • <!DOCTYPE html>
    <head>
    <title>CSS3仿苹果网站的搜索框效果[www.codesocang.com]</title>
    <style>
    body{font: 12px/1.2 Arial,Helvetica,san-serif;margin: 0;}
    a: link,
    a: visited{text-decoration: none;color: #416CE5;}
    h2{font-size: 13px;margin: 15px 0 0 0;}
    header{background: #36281B;box-shadow: 0 -15px 15px rgba(0,0,0,0.2)inset;clear: both;height: 90px;min-width: 1000px;width: 100%;border-bottom: 5px solid #6e6151;}
    #header{clear: both;width: 100%}
    section#masthead{margin: 0 auto;width: 1000px}
    #site-title{float: left;font-size: 30px;line-height: 36px;margin: 0 0 18px 0;width: 700px}
    #site-title a{color: #000;font-weight: bold;text-decoration: none}
    #site-description{clear: right;float: right;font-style: italic;margin: 14px 0 18px 0;width: 220px}
    #branding{float: left;width: 300px}
    #logo{float: left;height: 90px;margin: 0 15px 0 0;width: 350px;background: url(http://www.codefans.net/jscss/demoimg/201312/images/bg-glow.png) no-repeat scroll 0 0 transparent}
    #logo img{border: 0 none;position: relative;top: 10px;z-index: 200}
    #topad{float: left;height: 40px;margin: 15px 15px 0 135px;width: 320px;}
    #searchb{float: left;margin: 30px 0}
    #searchb input[type="text"], #searchb textarea{background: none repeat scroll 0 0 #F9F9F9;border: 0 none;float: left;height: 20px;padding: 5px 10px;width: 170px;-webkit-border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;-webkit-box-shadow: 0 2px 2px #000, 0 3px 10px rgba(0, 0, 0, 0.4) inset;-moz-box-shadow: 0 2px 2px #000, 0 3px 10px rgba(0, 0, 0, 0.4) inset;box-shadow: 0 2px 2px #000, 0 3px 10px rgba(0, 0, 0, 0.4) inset;font-family: arial, helvetica, sans-serif;font-size: 15px}
    #searchb .go{-webkit-border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;-webkit-box-shadow: 0 2px 2px #000, 0 -2px 10px rgba(0, 0, 0, 0.5) inset;-moz-box-shadow: 0 2px 2px #000, 0 -2px 10px rgba(0, 0, 0, 0.5) inset;box-shadow: 0 2px 2px #000, 0 -2px 10px rgba(0, 0, 0, 0.5) inset;background: #82AD32;border: 0 none;font-size: 15px;font-weight: bold;height: 30px;margin: 0 10px;padding-bottom: 3px;text-shadow: 0 1px rgba(255, 255, 255, 0.35);width: 60px;cursor: pointer}
    h1.title{margin: 50px 0;text-align: center;width: 100%;}
    h1.title a{color: #555555;font-family: Georgia,Serif;font-size: 22pt;font-style: italic;text-decoration: none;}
    h1.title a: hover{color: #333;}
    .tutorial{position: fixed;width: 100%;text-align: center;font-size: 15px;bottom: 0;padding: 10px;font-family: 'Droid Sans', Arial, Sans-serif;background: #C6DFA2;border-top: 1px solid #B2C891;}
    #demo-wrapper {background:#555555;margin: 80px auto 100px;overflow: hidden;padding: 10px;width: 550px;border-radius: 30px 30px 30px 30px;border: 1px solid #444444;box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 1px 3px rgba(255, 255, 255, 0.2) inset;}
    #dark {height: 28px;padding: 40px 160px;background:#555;}
    #dark #search input[type="text"] {
        background: url(http://www.codefans.net/jscss/demoimg/201312/search-dark.png) no-repeat 10px 6px #444;
        border: 0 none;
        font: bold 12px Arial,Helvetica,Sans-serif;
        color: #777;
        width: 150px;
        padding: 6px 15px 6px 35px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
        -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
        -webkit-transition: all 0.7s ease 0s;
        -moz-transition: all 0.7s ease 0s;
        -o-transition: all 0.7s ease 0s;
        transition: all 0.7s ease 0s;
    }
    #dark #search input[type="text"]:focus {width: 200px;}
    #white {height: 28px;padding: 40px 160px;}
    #white #search input[type="text"] {
        background: url(http://www.codefans.net/jscss/demoimg/201312/search-white.png) no-repeat 10px 6px #fcfcfc;
        border: 1px solid #d1d1d1;
        font: bold 12px Arial,Helvetica,Sans-serif;
        color: #bebebe;
        width: 150px;
        padding: 6px 15px 6px 35px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
        -webkit-transition: all 0.7s ease 0s;
        -moz-transition: all 0.7s ease 0s;
        -o-transition: all 0.7s ease 0s;
        transition: all 0.7s ease 0s;
        }
    #white #search input[type="text"]:focus {width: 200px;}
    #apple {height: 28px;padding: 40px 160px;background:#555;}
    #apple #search input[type="text"] {
        background: url(http://www.codefans.net/jscss/demoimg/201312/search-white.png) no-repeat 10px 6px #444;
        border: 0 none;
        font: bold 12px Arial,Helvetica,Sans-serif;
        color: #d7d7d7;
        width:150px;
        padding: 6px 15px 6px 35px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
        -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
        -webkit-transition: all 0.7s ease 0s;
        -moz-transition: all 0.7s ease 0s;
        -o-transition: all 0.7s ease 0s;
        transition: all 0.7s ease 0s;
    }
    #apple #search input[type="text"]:focus {
        background: url(http://www.codefans.net/jscss/demoimg/201312/search-dark.png) no-repeat 10px 6px #fcfcfc;
        color: #6a6f75;
        width: 200px;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
        -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
        text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }
    </style>
    </head>
    <body>
    <h1 class="title">仿apple网站的CSS3搜索框</h1> 
    <div id="demo-wrapper">
    <div id="dark">
    <form method="get" action="/search" id="search">
      <input name="q" type="text" size="40" placeholder="Search..." />
    </form>
    </div>
    <div id="white">
    <form method="get" action="/search" id="search">
      <input name="q" type="text" size="40" placeholder="Search..." />
    </form>
    </div>
    <div id="apple">
    <form method="get" action="/search" id="search">
      <input name="q" type="text" size="40" placeholder="Search..." />
    </form>
    </div>
    </div>
    </body>
    </html>

由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-css/6522.html

css样式下载排行

最新文章