竹子建站小技巧：图文组件的新样式

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：由于这段代码是针对图文组件编写的，所以也只能对图文组件生效哦！

好了，今天的小教程就到这里，大家赶快去尝试一下吧！，我们下期再见。

竹子建站小技巧：给图文组件的又一新用法----加上进度条及小箭头

竹子建站小技巧：如何制作自定义网站弹窗：独立板块的使用技巧

: 下一篇

常见问题

如何解析域名和绑定网站域名

网站备案后为什么打不开

如何给域名备案