竹子建站
图文组件小技巧:鼠标移入向上漂浮
2020-08-21 16:48:46

今天小编给大家带来的是一个简单的小代码,可以给图文组件加上一个鼠标移入向上漂浮的效果,如下图所示:

和过去小编写过的小教程一样,这类代码本身并不复杂,但是在合适的地方使用就可以起到点睛的作用,让网站看起来生动很多。

下面就让我们一起来看看如何实现这个效果吧!首先是这个效果的代码:

<style>

    ._13i6hfl3co000{

  }

 

._13i6hfl3co000 .zz-comp-list__item{

 

  transition: all .5s linear;

}

 

 ._13i6hfl3co000 .zz-comp-list__item:hover{

 

   transform: translateY(-10px)

}

 

._13i6hfl3co000 .zz-comp-list__item:hover >.zz-element-wrapper>.text .title, ._13i6hfl3co000 .zz-comp-list__item:hover >.zz-element-wrapper>.text .title > *{

 

  color: rgba(217, 37, 37, 1);

}

._13i6hfl3co000 .zz-comp-list__item>.zz-element-wrapper:hover{

 

  box-shadow: 0px 0px 14.25px 0.75px rgba(0, 0, 0, 0.15);

  transition: all 0.36s ease;

}

</style>

代码的添加方式和以前的方式别无二致,同样的我们可以先将这段代码复制到提前准备好的图文组件中:

然后我们将这段代码中的组件ID改正确:

本次教程中需要改动的代码部分已经在代码中用绿色背景色标记,逐一进行修改即可。

PS:由于这段代码是针对图文组件编写的,所以也只能对图文组件生效哦!

好了,今天的小教程就到这里了,我们下期再见吧!