CSS3动感鼠标悬停代码特效

1、新建html文档。

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

5、代码整体结构。