CSS3鼠标经过突出放大显示特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3鼠标经过突出放大显示特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html><html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>CSS3鼠标经过突出放大显示特效</title>
<link rel="stylesheet" type="text/css" media="all" href="css/style.css">
<link rel="stylesheet" type="text/css" media="all" href="css/evenFlow.css">	
</head>
<body>

<div class="container">
	<ul class="evenflow sample_1">
	<li class="evenflow_scale">
		<a href="#" target="_blank">
		<img src="img/1.png"></a>
	</li>
	<li class="evenflow_scale">
		<a href="#" target="_blank">
		<img src="img/2.png"></a>
	</li>
	<li class="evenflow_scale">
		<a href="#" target="_blank">
		<img src="img/3.png"></a>
	</li>
	<li class="evenflow_scale">
		<a href="#" target="_blank">
		<img src="img/4.png"></a>
	</li>
	<li class="evenflow_scale">
		<a href="#" target="_blank">
		<img src="img/5.png"></a>
	</li>
	<li class="evenflow_scale">
		<a href="#" target="_blank">
		<img src="img/6.png"></a>
	</li>
	</ul>
</div>
</body>
</html>

CSS代码(style.css):

/* RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;outline:none;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
html{overflow-y:scroll;}
body{font-family:"Open Sans",sans-serif;background:#343333;color:#FFF;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
ol,ul{list-style:none;}
input,textarea{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;outline:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
strong,b{font-weight:bold;}
em,i{font-style:italic;}
table{border-collapse:collapse;border-spacing:0;}
img{border:0;max-width:100%;}
pre,code{color:#FFF;font-family:monospace;font-size:18px;}
.container{margin:0 auto;}
h1{font-size:62px;color:#FFF;font-family:'Raleway',sans-serif;font-weight:100;}
p{font-size:25px;line-height:46px;font-weight:100;color:#FFF;}
p.example{font-size:20px;line-height:32px;font-weight:100;color:#FFF;}
h2{font-size:26px;font-weight:300;line-height:46px;color:#FFF;}
ul li{font-size:25px;line-height:46px;font-weight:100;color:#FFF;}
.setting{font-weight:400;display:inline-block;width:200px;}
a{color:#FFF;text-decoration:none;}
/* IPHONE */
@media (max-width:375px){.container{width:375px;padding-top:500px;}
}
/* IPAD */
@media (max-width:768px){.container{width:500px;padding-top:250px;}
.setting{display:block;}
}
/* DESKTOP */
@media (min-width:768px){.container{width:768px;padding-top:200px;}
}
/* DESKTOP + */
@media (min-width:1024px){.container{width:1000px;padding-top:100px;}
}

附件:下载该文件资源,减少时间成本(增值服务)