鹏仔广告代码,块状渐变文字广告美化版代码分享。

鹏仔广告代码,块状渐变文字广告美化版代码分享。

简单的文字渐变广告代码,列数为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>
码字不易,转载请注明出处:大海资源网 » 鹏仔广告代码,块状渐变文字广告美化版代码分享。
喜欢(2)

评论抢沙发

评论前必须登录!

免责声明:敬告所有本站用户,大海资源网所有内容皆来源于网络资源,未做安全校验测试,涉及支付、个人信息等重要内容切勿上线运营,视频教学中的源码虽然可以搭建成功运行,但仅作为网络教学使用,不代表没有隐藏后门漏洞等问题,使用前请自行检测,所有后果自行承担。
在线客服

在线客服

  • 扫描二维码,微信联系 QQ扫描二维码