01 div实现浮动效果

时间:2024-03-03 19:18:08

       浮动效果其实在很多的UI组件中都已经实现了,尤其是在很多的卡片组件中都有相应的参数可以进行设置。今天我们主要介绍的是如何自己用原生的css来实现浮动效果。

      在div的所有属性中,有一个“box-shadow”的属性,此属性是设置阴影效果的属性,我们对一个div进行如下图所示的设置,即可实现简单的浮动效果,如图:

     效果如下:

     大家也可以按照自己的需求对此属性继续修改,达到逼真的效果。

     此属性设置完之后,配合鼠标的经过事件(mouseenter、mouseleave)就可以实现鼠标滑过此div后出现浮动效果的功能了。