鼠标滑过栏目CSS3动画特效特效代码

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

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

以下是鼠标滑过栏目CSS3动画特效特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>鼠标滑过栏目CSS3动画特效</title>
<link type="text/css" href="css/css.css" rel="stylesheet">
</head>
<body>
<br>
<div class="kePublic">
<div class="shortcut">
<a href="#" target="_blank">
 <img class="img" src="images/1383541695.jpg" alt="" height="270" width="230">
 <img class="imgH" src="images/1383536964.jpg" alt="" height="270" width="230">
 <span>想知道我们都有什么服务？<br>这里有您要的答案！</span>
</a>
<a href="#" target="_blank">
  <img class="img" src="images/1383536386.jpg" alt="" height="270" width="230">
  <img class="imgH" src="images/1383534389.jpg" alt="" height="270" width="230">
  <span>您想要了解资海吗？<br>让我带您了解我们的优势！</span>
</a>
<a href="#" target="_blank">
  <img class="img" src="images/1383540866.jpg" alt="" height="270" width="230">
  <img class="imgH" src="images/1383532486.jpg" alt="" height="270" width="230">
  <span>给您一个惊喜，带您进入我们的世界！<br>终有一个是您想要的！</span>
</a>
<a href="#" target="_blank">
  <img class="img" src="images/1383541808.jpg" alt="" height="270" width="230">
  <img class="imgH" src="images/1383539327.jpg" alt="" height="270" width="230">
  <span>走进我们的世界<br>我们为您提供最专业、最优质的服务！</span>
</a>
</div>
</div>
</body>
</html>

CSS代码(css.css):

@charset "utf-8";/* CSS Document */
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dd,dt,img,form{padding:0px;margin:0px;border:0;font-size:12px;}
h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:100;}
select{padding:0px;margin:0px;overflow:scroll;}
td,tr,td{font-size:12px;}
ul,ol li{list-style:none;}
input{padding:0px;margin:0px;}
.left{float:left;}
.right{float:right;}
.clear{clear:both;font-size:0px;height:0px;overflow:hidden;}
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus{outline:none;}
a{text-decoration:none;blr:expression(this.onFocus=this.blur());}
a{outline:none;}
.mKeBanner,.mKeBanner div{text-align:center;}
body{font-family:Microsoft YaHei,"宋体";background-color:#f1f1f1;}
::selection{background:#ec9e65;color:#fff;}
::-moz-selection{background:#ec9e65;color:#fff;}
::-webkit-selection{background:#ec9e65;color:#fff;}
.shortcut{width:1000px;height:270px;margin:0px auto;position:relative;z-index:101;overflow:hidden;}
.shortcut a{margin-right:20px;display:block;width:230px;height:270px;position:relative;overflow:hidden;float:left;transition:all 0.3s linear;-webkit-transition:all 0.3s linear;top:0px;}
.shortcut a img{position:absolute;left:0px;top:0px;}
.shortcut a span{position:absolute;line-height:18px;font-family:arial;color:#fff;left:15px;bottom:32px;transition:all 1s;-webkit-transition:all 1s;}
.shortcut a .imgH{left:-230px;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;}
.shortcut a:hover{text-decoration:none;}
.shortcut a:hover .imgH{display:block;left:0px;}
.shortcut a:hover span{animation:img4 0.8s linear infinite alternate;-webkit-animation:img4 1s linear infinite alternate;}
@keyframes img4{0%{bottom:32px;}
100%{bottom:27px;}
}
@-webkit-keyframes img4{0%{bottom:32px;}
100%{bottom:27px;}
}

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