简单的文字渐变广告代码，列数为5列，行数不限制，反正五个五个加，你想放多少行都行。

下面是代码：

<style>

.text-block{

width: 100%;

overflow: hidden;

background: rgba(255,255,255,.6);

display: flex;

justify-content: space-between;

flex-wrap: wrap;

}

.text-block a{

color: rgba(0,0,0,.6);

font-size: 14px;

font-weight: bold;

line-height: 30px;

text-align: center;

text-decoration: none;

display: block;

width: 19.5%;

height: 30px;

overflow: hidden;

position: relative;

margin: 1px 0;

}

.text-block a div{

width: 100%;

height: 60px;

padding: 0 5px;

box-sizing: border-box;

position: absolute;

top: 0;

left: 0;

transition: all .3s;

}

.text-block a:hover div{

transition: all .3s;

color: #fff;

top: -30px;

text-shadow: 0 2px 3px rgba(0,0,0,.6);

}

.text-block p{

width: 100%;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

.text-block a div :nth-child(1){

background: linear-gradient(to right,#b4b4ff, #aedefc);

}

.text-block a div :nth-child(2){

background: linear-gradient(to right,#aedefc,#b4b4ff);

}


</style>

<div class="text-block">

<a target="_blank" href="https://www.dhzy.fun/">

<div>

<p>大海资源网</p>

<p>点击访问</p>

</div>

</a>

<a target="_blank" href="javascript:;">

<div>

<p>百变鹏仔</p>

<p>点击访问</p>

</div>

</a>

<a target="_blank" href="javascript:;">

<div>

<p>百变鹏仔</p>

<p>点击访问</p>

</div>

</a>

<a target="_blank" href="javascript:;">

<div>

<p>百变鹏仔</p>

<p>点击访问</p>

</div>

</a>

<a target="_blank" href="javascript:;">

<div>

<p>百变鹏仔</p>

<p>点击访问</p>

</div>

</a>

<a target="_blank" href="javascript:;">

<div>

<p>广告招租</p>

<p>点击咨询</p>

</div>

</a>

<a target="_blank" href="javascript:;">

<div>

<p>广告招租</p>

<p>点击咨询</p>

</div>

</a>

<a target="_blank" href="javascript:;">

<div>

<p>广告招租</p>

<p>点击咨询</p>

</div>

</a>

<a target="_blank" href="javascript:;">

<div>

<p>广告招租</p>

<p>点击咨询</p>

</div>

</a>

<a target="_blank" href="javascript:;">

<div>

<p>广告招租</p>

<p>点击咨询</p>

</div>

</a>

</div>