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';"><p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p><p>CSS3动感鼠标悬停代码特效</p></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、查看效果。
