纯css3网页相片鼠标悬停效果特效代码

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

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

以下是纯css3网页相片鼠标悬停效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为纯css3网页相片鼠标悬停效果，属于站长常用代码" />
<title>纯css3网页相片鼠标悬停效果</title>
<link rel="stylesheet" type="text/css" href="css/lrtk.css" media="all">
</head>
<body><br /><br />
<!-- 代码 开始 -->
<div class="m-artlist m-artlist-2"> 
  <div class="item">
    <div class="img">
      <a href="#" target="_top">
        <span class="bor">
        </span>
        <span class="bor">
        </span>
        <span class="bor">
        </span>
        <span class="bor">
        </span>
        <img src="images/01.jpg">
      </a>
    </div>
  </div>
  
  <div class="item">
    <div class="img">
      <a href="#" target="_top">
        <span class="bor">
        </span>
        <span class="bor">
        </span>
        <span class="bor">
        </span>
        <span class="bor">
        </span>
        <img src="images/02.jpg">
      </a>
    </div>
  </div>
  
  <div class="item">
    <div class="img">
      <a href="#" target="_top">
        <span class="bor">
        </span>
        <span class="bor">
        </span>
        <span class="bor">
        </span>
        <span class="bor">
        </span>
        <img src="images/03.jpg">
      </a>
    </div>
  </div>
</div>
<!-- 代码 结束 -->
<div style="clear:both;"></div>
</body>
</html>

CSS代码(lrtk.css):

/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,button,textarea,p,blockquote,th,td{padding:0px;margin:0px;}
li{list-style:none outside none;}
h1,h2,h3,h4,h5,h6{font-weight:bold;font-size:100%;}
a,button{cursor:pointer;}
a{text-decoration:none;color:rgb(68,68,68);outline:medium none;}
a:hover{text-decoration:none;color:rgb(117,148,179);}
.m-artlist{margin-left:auto;margin-right:auto;width:900px;}
.m-artlist-2 img,.m-artlist-2 .bor,.m-artlist-2 a,.m-slbanner .prev a,.m-slbanner .next a{transition:all 0.3s ease 0s;}
.m-artlist .item{float:left;width:262px;margin:0px 30px 0px 0px;}
.m-artlist .img{position:relative;height:262px;}
.m-artlist .img a,.m-artlist .img img,.m-artlist .bor,.m-artlist-2 .imgbg{position:absolute;left:0px;top:0px;width:100%;height:100%;}
.m-artlist .bor{width:240px;height:240px;border:10px solid rgb(0,0,0);opacity:0;}
.m-artlist-1 .bor:nth-child(2),.m-artlist-1 .bor:nth-child(3),.m-artlist-1 .bor:nth-child(4){display:none;}
.m-artlist-2 .img{height:176px;}
.m-artlist-2 .bor{width:258px;height:174px;border:1px solid rgb(224,224,224);background:none repeat scroll 0% 0% rgb(255,255,255);opacity:1;}
.m-artlist-2 .bor:first-child{left:8px;top:8px;}
.m-artlist-2 .bor:nth-child(2){left:6px;top:6px;}
.m-artlist-2 .bor:nth-child(3){left:4px;top:4px;}
.m-artlist-2 .bor:nth-child(4){left:2px;top:2px;}
.m-artlist-2 .txt{margin-top:10px;}
.m-artlist-2 a:hover img{-moz-transform:rotate(-1deg);-webkit-transform:rotate(-1deg);-o-transform:rotate(-1deg);-ms-transform:rotate(-1deg);transform:rotate(-1deg);}
.m-artlist-2 a:hover .bor:first-child{-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);-o-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg);}
.m-artlist-2 a:hover .bor:nth-child(2){-moz-transform:rotate(1deg);-webkit-transform:rotate(1deg);-o-transform:rotate(1deg);-ms-transform:rotate(1deg);transform:rotate(1deg);}
.m-artlist-2 a:hover .bor:nth-child(3){-moz-transform:rotate(-1deg);-webkit-transform:rotate(-1deg);-o-transform:rotate(-1deg);-ms-transform:rotate(-1deg);transform:rotate(-1deg);}
.m-artlist-2 a:hover .bor:nth-child(4){-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-o-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg);}

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