transition实现鼠标放到一个模块(hover)的向上动画效果

247 阅读1分钟

一、效果如下:

image.png

二、代码如下:

.recom-bd ul li:hover {
      box-shadow0 10px 20px  rgba(0,0,0,0.4);
      margin-top: -6px;
     transition: margin 0.5s ease 0s;//核心代码
 }

三、解释和注意事项:

1、li指的就是这一个个需要出现向上动画的小模块;

2、这个li模块必须设置高,才能起作用,出现向上的动画效果;