竹子建站
竹子建站小技巧:图文组件的新样式
2020-11-06 15:41:15
图文组件是一个比较常用的元素组件,配合简单的css代码就可以做到比较漂亮的效果,今天小编给大家带来了一个关于图文组件的小教程,具体效果如下:
可以在鼠标移动到图文上面时,使图片上面出现一个动态的背景色块,让我们一起来看看是怎么完成这个效果的吧!
首先老规矩这里附上一段代码:

<style>

    ._140lh54bco000{

  }

._140lh54bco000 .zz-comp-list__item .zz-element-wrapper .do-img-cover.img-0:before{

    content: "";

    display: block;

    width: 0%;

    height: 100%;

/*   background: #333;  */

  

/*     background: transparent linear-gradient(180deg, rgba(230, 50, 90, 1) 0%, rgba(170, 35, 39, 1) 100%);  */

  background: transparent linear-gradient(to right, #30cfd0 0%, #330867 100%);

 

    position: absolute;

    left: 50%;

    top: 0;

    transition: ease .3s;

/*     opacity: 0; */

     opacity: 0.85!important;

 

}

._140lh54bco000 .zz-comp-list__item:hover .zz-element-wrapper .do-img-cover.img-0:before {

    opacity: 1;

    width: 100%;

    left: 0;

}

</style>

 

我们可以通过复制这串代码来实现这个图文效果(需要修改代码中的组件ID),如下图所示:

如上图所示操作,然后保存并发布网站,这样我们就获得这个图文的效果了。同时我们可以修改上述代码,来调整这段代码的效果。

如下图所示:代码中红框部分有一个 .3s ,这里就是整个效果动画的播放时长, 这里的 .3s就是动画时长为0.3秒的意思,我们可以修改这里的数值来调整动画时长。

比如调整为0.6,则动画时长就延长了一倍,相应的动画播放速度就会放慢一倍。

而代码中的这一段则可以调整背景色的颜色,如下图中的 #30cfd0 以及 #330867 就是两个颜色色号,它们共同组成了案例的图文效果中渐变色的效果

我们可以通过修改色号来调整这里的背景颜色,同时可以修改代码,将组件中渐变色的方向进行调整。
使用原始代码,颜色的渐变方向就会是从左到右的,我们可以将上图中框选的代码进行替换,就可以改变渐变色的方向。
替换为下面这串代码,渐变色的方向就会变为从上到下:
 background: transparent linear-gradient(#f83600 0%, #f9d423 100%);
替换为下面这串代码,渐变色的方向就会变为从左上角到右下角:
background: transparent linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%);
通过代码的调整,我们就可以设置出不同的渐变色来,如下图所示:
PS:由于这段代码是针对图文组件编写的,所以也只能对图文组件生效哦!
好了,今天的小教程就到这里,大家赶快去尝试一下吧!,我们下期再见。