浮动效果其实在很多的UI组件中都已经实现了,尤其是在很多的卡片组件中都有相应的参数可以进行设置。今天我们主要介绍的是如何自己用原生的css来实现浮动效果。
在div的所有属性中,有一个“box-shadow”的属性,此属性是设置阴影效果的属性,我们对一个div进行如下图所示的设置,即可实现简单的浮动效果,如图:
效果如下:
大家也可以按照自己的需求对此属性继续修改,达到逼真的效果。
此属性设置完之后,配合鼠标的经过事件(mouseenter、mouseleave)就可以实现鼠标滑过此div后出现浮动效果的功能了。