CSS3制作Apple官网的Seach Box效果

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

今天的教程我们是使用CSS3来制作一个Seach Box效果,这种效果的灵感来自于Apple的官网。当您的鼠标点击了Search Box或者说当Search Box获得焦点时,Search Box会慢慢的变长。这种动画效果实现都只使用了CSS3transition属性完成,当然我们同时也使用了CSS3的其他属性,比如说border-radiusbox-shadowtext-shadow制作更cool的Search Box效果。

HTML Markup

实现上面的DEMO效果,我们首先需要创建为其创建一个HTML结构,这种结构是相当的容易,如:

		<h2>黑色背景的Search Box</h2>
		<form action="" id="searchBlack" method="get" class="search bgBlack">
			<input type="text" name="search" size="40" placeholder="Search..." />
		</form>
		<h2>高亮背景的Search Box</h2>
		<form action="" id="searchLight" method="get" class="search bgLight">
			<input type="text" name="search" size="40" placeholder="Search..." />
		</form>
		<h2>Apple.com的Search Box</h2>
		<form action="" id="searchApple" method="get" class="search appleSearch">
			<input type="text" name="search" size="40" placeholder="Search..." />
		</form>
	

接下来我们在这个HTML模板的基础上,使用不同的CSS3样式来制作类似Apple的官网Search Box的几种效果。

因为几个效果我们有一些共用的样式,首先们可以给这几种效果写一个共用的样式:

		.search {
			position: relative;
		}
		
		.search:before {
			content: "";
			border: 1px solid #777;
			border-width: 1px 1px 2px;
			width: 5px;
			height: 0;
			display: inline-block;
			-moz-transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			transform: rotate(45deg);
			position: absolute;
			left:16px;
			top:15px;
			z-index:3;
		}
		
		.search:after {
			content: "";
			width: 5px;
			height: 5px;
			border: 2px solid #777;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			position: absolute;
			z-index: 2;
			left: 10px;
			top: 7px;
			display: inline-block;
		}
		
		.search input[type="text"] {
			font: bold 12px Arial,Helvetica,Sans-serif;
			width: 150px;
			padding: 6px 15px 6px 35px;
			border: 0 none;
			color: #777;
			-moz-border-radius: 20px;
			-webkit-border-radius: 20px;
			border-radius: 20px;
			-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;
		}
		
		.search input[type="text"]:focus {
			width: 200px;
		}
	

初步效果如下:

上面的效果中,我们有两个地方是很关键的:

  1. Search手柄图:这里这个放大镜图,我在此处完全使用的是CSS3属性制作,主要结合了CSS3伪类选择器的“:before”和“:after”、CSS3 Border-radius以及CSS3 transform几个属性,如果大家对CSS3制作图片效果感兴趣可以参考《纯CSS制作的图形效果》一文,只是这种方法在IE下将是杯具的,你无法看到这个放大镜的图片;
  2. Search Box变宽:这里我们使用了CSS3 transition让Search Box在获得焦点或被点击时,带有一种动画变宽的效果,因为我们在“:focus”时改变了Search Box的宽度值。

上面的效果看起来并不理想,没有达到我们想要的效果,那么下面我们在这个基础上再来美化他,我们分别制作三种效果:

1、Search Box 背景是黑色效果

这里我们需要制作的一个黑色背景的Search Box,所以我们给其加上一定的背景色,并且给其加上一点阴影效果,让其更美:

		/*===========黑色背景色的Search Box============*/
		.bgBlack input[type="text"] {
			background-color: #444;
			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;    
		}
	

我们一起来看看其最后的效果:

2、Search Box 背景是高亮效果

有了上面的代码,我们在制作成其他的效果就非常的容易了,你只需要改变一下“input[type="text"]”元素的背景色,字体色,阴影效果等就能制作出你需要的效果了,当然你追求完美的话,你把放大镜的效果变换一下就更佳了:

	/*===============高亮背景色的Search Box==============*/
		.bgLight input[type="text"]{
			background-color: #fcfcfc;/*change the background color*/
			color: #bebebe;/*change the font color*/
			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;
		}
		.bgLight:after,
		.bgLight:before {
			border-color: #bebebe;/*change the icon color*/
		}
	

3、Apple.com 的Search Box效果

下面这个效果是我们模仿Apple首页的Search Box效果,

		/*==============Apple.com Search Box效果====================*/
		.appleSearch input[type="text"] {
			background-color: #444;
			color: #d7d7d7;
			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;    
		}
		
		.appleSearch input[type="text"]:focus {
			background-color: #fcfcfc;
			color: #6a6f75;
			-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);
    }
	

最终效果出来就如下面的Demo所示:

如果你为了让你的效果可以更好看一点,你可以在美化一下,比如说我在这里,在form外面加了一个div,加上背景色,让其更有视觉对比效果

大家都看到上面的效果了吧,是不是很方便很简单的制作方法呀。如果是的话,你就也自己动手做做吧,当你做出效果或者查看DEMO时,你不要问我,为什么IE下没有这样的效果呢?是的,具体原因我就不说了,如果你想有更好的视觉效果,我建议你快点安装最新的:Apple SafariGoogle ChromeMozilla FirefoxOpera现代浏览器。如果你有更好的创意记得给我留言哟。

如需转载烦请注明出处:W3CPLUS

The 13th Version UA Yeezy Boost 350 Turtle Dove, the perfect version

如需转载,烦请注明出处:https://www.w3cplus.com/css3/create-apple-search-box-with-css3

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部