以下是 CSS3鼠标悬停图标导航动画特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>CSS3鼠标悬停图标导航动画特效</title>
<link href="css/index.min.css" rel="stylesheet" />
</head>
<body>
<br><br><br><br>
<section class="business active">
<div class="box">
<ul class="items list-inline">
<li class="pc">
<u class="cl"></u>
<u class="cr"></u>
<i></i><strong>高端定制网站</strong>
<p>企业高端定制网站设计<br />彰显品牌形象</p>
</li>
<li class="mobi">
<u class="cl"></u>
<u class="cr"></u>
<i></i><strong>移动网站建设</strong>
<p>定制手机网站 / 微网站制作<br />布局移动互联网</p>
</li>
<li class="sys">
<u class="cl"></u>
<u class="cr"></u>
<i></i><strong>业务系统研发</strong>
<p>基于 B/S 架构的系统研发<br />让业务办公轻松自如</p>
</li>
<li class="app">
<u class="cl"></u>
<u class="cr"></u>
<i></i><strong>APP应用程序</strong>
<p>基于 iOS / Android 应用开发<br />掌控智能终端时代</p>
</li>
<li class="host">
<u class="cl"></u>
<u class="cr"></u>
<i></i><strong>服务器运维</strong>
<p>我们不只提供云硬件和网络<br />更加注重技术运维</p>
</li>
</ul>
</div>
</section>
</body>
</html>
CSS代码(index.min.css):
@charset "utf-8";*{padding:0;margin:0;}
a,a:hover{text-decoration:none;}
section.business{background:url(../images/wallpaper2.jpg) 50% bottom;}
.business .box{width:1200px;margin:0 auto;position:relative;-webkit-transition:all .3s ease-in-out 0s;-moz-transition:all .3s ease-in-out 0s;-ms-transition:all .3s ease-in-out 0s;-o-transition:all .3s ease-in-out 0s;transition:all .3s ease-in-out 0s;}
.business .box ul.items{margin:0 auto;}
.business .box ul.items li{width:200px;height:300px;margin:0 8px;background:url(../images/bg_green.png) no-repeat 0px 400px;overflow:hidden;display:inline-block;}
.business .box ul.items li i{display:block;position:relative;margin:0 auto;margin-top:43px;height:69px;}
.business .box ul.items li.pc i{width:69px;background:url(../images/words.png) no-repeat -245px -357px;}
.business .box ul.items li.mobi i{width:64px;background:url(../images/words.png) no-repeat -416px -291px;}
.business .box ul.items li.sys i{width:76px;background:url(../images/words.png) no-repeat -415px -362px;}
.business .box ul.items li.app i{width:74px;background:url(../images/words.png) no-repeat -244px -439px;}
.business .box ul.items li.host i{width:79px;background:url(../images/words.png) no-repeat -420px -439px;}
.business .box ul.items li u{display:block;position:absolute;width:156px;height:156px;margin-left:22px;background:url(../images/words.png) no-repeat 0px -363px;-webkit-transition:all .5s ease-in-out 0s;-moz-transition:all .5s ease-in-out 0s;-ms-transition:all .5s ease-in-out 0s;-o-transition:all .5s ease-in-out 0s;transition:all .5s ease-in-out 0s;}
.business .box ul.items li u.cl{clip:rect(0px,156px,-10px,78px);}
.business.active .box ul.items li u.cl{clip:rect(0px,156px,156px,78px);}
.business .box ul.items li u.cr{clip:rect(156px,78px,156px,0px);}
.business.active .box ul.items li u.cr{clip:rect(0px,78px,156px,0px);}
.business .box ul.items li strong{display:block;margin-top:70px;font-size:16px;font-weight:normal;text-align:center;}
.business .box ul.items li p{position:relative;top:200px;color:White;font-family:Arial,"宋体";font-size:12px;line-height:20px;text-align:center;}
.business .box ul.items li:hover{background-position:0px 0px;-webkit-transition:all .5s ease-in-out .3s;-moz-transition:all .5s ease-in-out .3s;-ms-transition:all .5s ease-in-out .3s;-o-transition:all .5s ease-in-out .3s;transition:all .5s ease-in-out .3s;}
.business .box ul.items li:hover i{-webkit-transition:all .5s ease-in-out .4s;-moz-transition:all .5s ease-in-out .4s;-ms-transition:all .5s ease-in-out .4s;-o-transition:all .5s ease-in-out .4s;transition:all .5s ease-in-out .4s;}
.business .box ul.items li.pc:hover i{background:url(../images/words.png) no-repeat -168px -357px;}
.business .box ul.items li.mobi:hover i{background:url(../images/words.png) no-repeat -337px -291px;}
.business .box ul.items li.sys:hover i{background:url(../images/words.png) no-repeat -327px -362px;}
.business .box ul.items li.app:hover i{background:url(../images/words.png) no-repeat -164px -439px;}
.business .box ul.items li.host:hover i{background:url(../images/words.png) no-repeat -335px -439px;}
.business .box ul.items li:hover u.cl{clip:rect(0px,156px,-10px,78px);}
.business .box ul.items li:hover u.cr{clip:rect(156px,78px,156px,0px);}
.business .box ul.items li:hover strong{color:White;-webkit-transition-delay:.4s;-moz-transition-delay:.4s;-ms-transition-delay:.4s;-o-transition-delay:.4s;transition-delay:.4s;}
.business .box ul.items li:hover p{top:20px;-webkit-transition:all .3s ease-in-out .5s;-moz-transition:all .3s ease-in-out .5s;-ms-transition:all .3s ease-in-out .5s;-o-transition:all .3s ease-in-out .5s;transition:all .3s ease-in-out .5s;}
.business .box label{display:block;margin:0 auto;margin-top:-40px;width:297px;height:21px;background:url(../images/words.png) no-repeat 0px -333px;}
section.cases{background:url(../images/wallpaper3.jpg);}
}
分享到QQ
分享到微博
微信扫一扫
