- 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>
相关内容推荐