基本信息
源码名称：CSS3制作超酷的鼠标悬停效果(放大、缩小、淡入淡出等)
源码大小：0.03M
文件格式：.zip
开发语言：CSS
更新时间：2019-05-05
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：78630559
本次赞助数额为： 2 元×
微信扫码支付：2 元
×
请留下您的邮箱，我们将在2小时内将文件发到您的邮箱
源码介绍
<!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=utf-8" />
<title>CSS3制作超酷的鼠标悬停效果</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
.container .demo{width:800px; margin:60px auto 10px auto}
@media only screen and (min-width: 420px) {
.demo{width:800px; margin:60px auto 10px auto}
}
.box{float:left; width:380px; height:260px}
.clear{clear:both}
</style>
</head>
<body>
<div class="container">
<div class="demo">
<div class="box">
<div class="he_border1">
<img class="he_border1_img" src="pro_1.jpg" alt="Image 01">
<div class="he_border1_caption">
<h3 class="he_border1_caption_h">前端效果</h3>
<p class="he_border1_caption_p">WEB前端应用教程 演示 源码</p>
<a class="he_border1_caption_a" href="#" ></a>
</div>
</div>
</div>
<div class="box">
<div class="he_border2">
<img class="he_border2_img" src="pro_1.jpg" alt="Image 01">
<div class="he_border2_caption">
<h3 class="he_border2_caption_h">前端效果</h3>
<p class="he_border2_caption_p">WEB前端应用教程 演示 源码</p>
<a class="he_border2_caption_a" href="#" ></a>
</div>
</div>
</div>
<div class="box">
<div class="he_3DFlipX">
<div class="he_3DFlipX_inner">
<div class="he_3DFlipX_img">
<img src="pro_1.jpg" alt="img01">
</div>
<div class="he_3DFlipX_caption">
<h3>前端效果</h3>
<p>WEB前端应用教程 演示 源码</p>
</div>
<a href="#" ></a>
</div>
</div>
</div>
<div class="box">
<div class="he_3DFlipY">
<div class="he_3DFlipY_inner">
<div class="he_3DFlipY_img">
<img src="pro_1.jpg" alt="img01">
</div>
<div class="he_3DFlipY_caption">
<h3>前端效果</h3>
<p>WEB前端应用教程 演示 源码</p>
</div>
<a href="#" ></a>
</div>
</div>
</div>
<div class="box">
<div class="he_ZoomInImg">
<img class="he_ZoomInImg_img" src="pro_1.jpg" alt="Image 01">
<div class="he_ZoomInImg_caption">
<h3 class="he_ZoomInImg_caption_h">前端效果</h3>
<p class="he_ZoomInImg_caption_p">WEB前端应用教程 演示 源码</p>
<a class="he_ZoomInImg_caption_a" href="#" ></a>
</div>
</div>
</div>
<div class="box">
<div class="he_ZoomOutImg">
<img class="he_ZoomOutImg_img" src="pro_1.jpg" alt="Image 01">
<div class="he_ZoomOutImg_caption">
<h3 class="he_ZoomOutImg_caption_h">前端效果</h3>
<p class="he_ZoomOutImg_caption_p">WEB前端应用教程 演示 源码</p>
<a class="he_ZoomOutImg_caption_a" href="#" ></a>
</div>
</div>
</div>
<div class="box">
<div class="he_slideCaptionDown">
<img class="he_slideCaptionDown_img" src="pro_1.jpg" alt="Image 01">
<div class="he_slideCaptionDown_caption">
<h3 class="he_slideCaptionDown_caption_h">前端效果</h3>
<p class="he_slideCaptionDown_caption_p">WEB前端应用教程 演示 源码</p>
<a class="he_slideCaptionDown_caption_a" href="#" ></a>
</div>
</div>
</div>
<div class="box">
<div class="he_slideAllDown">
<img class="he_slideAllDown_img" src="pro_1.jpg" alt="Image 01">
<div class="he_slideAllDown_caption">
<h3 class="he_slideAllDown_caption_h">前端效果</h3>
<p class="he_slideAllDown_caption_p">WEB前端应用教程 演示 源码</p>
<a class="he_slideAllDown_caption_a" href="#" ></a>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>