CSS3动感鼠标悬停代码特效

1、新建html文档。

2、书写hmtl代码。

<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>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

CSS3动感鼠标悬停代码特效

</div>

3、书写css代码。

.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; }

4、书写css3动画代码。

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:;

}

5、代码整体结构。

6、查看效果。