纯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=utf-8" />
<title>纯CSS3打造动感鼠标悬停特效 </title>
<link rel="stylesheet" href="css/style.css" type="text/css" />

</head>
<body>

<div class="box_1">
	<div class="mar_bor"></div>
	<!--正面-->
	<div class="info">
		<div class="sm_img"></div>
	</div>
	<!--反面-->
	<div class="ingo_fm">
		<h3>网页前端</h3>
	</div>
</div>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";body{background:url(../images/bg.jpg)repeat;}
.box_1{width:220px;height:220px;margin:40px auto;border-radius:50%;/*圆形*/
position:relative;/*相对定位*/
cursor:pointer;/*手指形状*/
}
.info{width:220px;height:220px;border-radius:50%;/*圆形*/
background:url(../images/13.jpg);position:relative;/*相对定位*/
}
.info .sm_img{width:160px;height:160px;border-radius:50%;/*圆形*/
border:0px solid #fff;position:absolute;/*移动元素 绝对定位*/
left:30px;top:30px;background:url(../images/13.jpg)center center;transition:all .5s;/*延迟*/
opacity:1;/*透明度*/
}
.ingo_fm{width:160px;height:160px;border-radius:50%;/*圆形*/
border:0px solid #ccccff;background-color:#000;position:absolute;/*移动元素 绝对定位*/
left:30px;top:30px;opacity:0;/*透明度*/
transition:all .5s;/*延迟*/
transform:scale(1.5);/*放大1.5倍*/
}
.ingo_fm h3{width:auto;height:auto;text-align:center;line-height:160px;font:24px/18px 'microsoft yahei';color:#fff;padding:10px;margin:62px 10px 0 10px;display:block;/*块集元素*/
background-color:;}
.mar_bor{width:160px;height:160px;background-color:#fff;position:absolute;/*移动元素 绝对定位*/
left:30px;top:30px;transform:scale(1.6);/*放大1.5倍*/
opacity:0;/*透明度*/
border-radius:50%;/*圆形*/
transition:all .7s;/*延迟*/
}
/*鼠标经过*/
.box_1:hover .sm_img{transform:scale(0);/*放大0倍*/
border:100px solid #fff;opacity:1;/*透明度*/
position:absolute;/*移动元素 绝对定位*/
left:-70px;top:-70px;}
.box_1:hover .ingo_fm{opacity:0.9;/*透明度*/
transform:scale(1);/*放大1.5倍*/
}
.box_1:hover .mar_bor{opacity:0.5;/*透明度*/
width:135px;height:135px;position:absolute;/*移动元素 绝对定位*/
left:42px;top:42px;}

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