<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>
如上图所示操作,然后保存并发布网站,这样我们就获得这个图文的效果了。同时我们可以修改上述代码,来调整这段代码的效果。
比如调整为0.6,则动画时长就延长了一倍,相应的动画播放速度就会放慢一倍。
而代码中的这一段则可以调整背景色的颜色,如下图中的 #30cfd0 以及 #330867 就是两个颜色色号,它们共同组成了案例的图文效果中渐变色的效果
常见问题