CSS3制作Apple官网Seach Box效果

2018-02-0104:43:34网页制作Comments2,440 views字数 3870阅读模式

使用CSS3来制作一个Seach Box效果,这种效果的灵感来自于Apple的官网。当您的鼠标点击了Search Box或者说当Search Box获得焦点时,Search Box会慢慢的变长。这种动画效果实现都只使用了CSS3的transition属性完成,当然我们同时也使用了CSS3的其他属性,比如说border-radius、box-shadow、text-shadow制作更cool的Search Box效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/186.html

CSS3制作Apple官网Seach Box效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/186.html

HTML Markup

实现上面的DEMO效果,我们首先需要创建为其创建一个HTML结构,这种结构是相当的容易,如:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/186.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的几种效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/186.html

因为几个效果我们有一些共用的样式,首先们可以给这几种效果写一个共用的样式:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/186.html

		.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;
		}

初步效果如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/186.html

CSS3制作Apple官网Seach Box效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/186.html

上面的效果中,我们有两个地方是很关键的:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/186.html

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

上面的效果看起来并不理想,没有达到我们想要的效果,那么下面我们在这个基础上再来美化他,我们分别制作三种效果:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/186.html

1、Search Box 背景是黑色效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/186.html

这里我们需要制作的一个黑色背景的Search Box,所以我们给其加上一定的背景色,并且给其加上一点阴影效果,让其更美:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/186.html

		/*===========黑色背景色的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;    
		}

我们一起来看看其最后的效果:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/186.html

CSS3制作Apple官网Seach Box效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/186.html

2、Search Box 背景是高亮效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/186.html

有了上面的代码,我们在制作成其他的效果就非常的容易了,你只需要改变一下“input[type="text"]”元素的背景色,字体色,阴影效果等就能制作出你需要的效果了,当然你追求完美的话,你把放大镜的效果变换一下就更佳了:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/186.html

	/*===============高亮背景色的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*/
		}

CSS3制作Apple官网Seach Box效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/186.html

3、Apple.com 的Search Box效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/186.html

下面这个效果是我们模仿Apple首页的Search Box效果,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/186.html

		/*==============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所示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/186.html

CSS3制作Apple官网Seach Box效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/186.html

如果你为了让你的效果可以更好看一点,你可以在美化一下,比如说我在这里,在form外面加了一个div,加上背景色,让其更有视觉对比效果.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/186.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/186.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定