网站块状渐变文字广告美化版代码分享

2023-11-18

网站块状渐变文字广告美化版代码分享

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

Hello,大家好,我是小编鹏仔,实在闲的没事干,用了十来分钟,简单写了这个文字广告代码分享给大家,列数为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=\"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>

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

		<div>

			<p>广告招租</p>

			<p>点击咨询</p>

		</div>

	</a>

</div>
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (1)

免责声明 1、本站所发布的全部内容源于互联网搬运(包括源代码、软件、学习资料等),本站提供的一切源码、软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。您必须在下载后的23个小时之内,从您的电脑或手机中彻底删除上述内容。
2、访问本站的用户必须明白,本站信息来自网络收集整理,版权争议与本站无关,本站对所提供下载的软件和程序代码不拥有任何权利,其版权归该软件和程序代码的合法拥有者所有,如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如本站不慎侵犯您的版权请联系我们,我们将及时处理,并撤下相关内容!敬请谅解! 侵删请致信E-mail:messi0808@qq.com
3、如下载的压缩包需要解压密码,若无特殊说明,那么文件的解压密码则为www.xmy7.com
4、如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!

小蚂蚁资源网 技术文章 网站块状渐变文字广告美化版代码分享 https://www.xmy7.com/zh/jishu/55310.html

相关文章