广告代码，块状渐变文字广告美化版代码

原创

季春二九

发布于 2023-07-14 22:47:37

1990

发布于 2023-07-14 22:47:37

文章被收录于专栏：季春二九

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

&lt;style&gt;
 
	.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);
 
	}
 
 
&lt;/style&gt;
 
 
 
&lt;div class="text-block"&gt;
 
	&lt;a target="_blank" href="javascript:;"&gt;
 
		&lt;div&gt;
 
			&lt;p&gt;季春二九&lt;/p&gt;
 
			&lt;p&gt;点击访问&lt;/p&gt;
 
		&lt;/div&gt;
 
	&lt;/a&gt;
 
	&lt;a target="_blank" href="javascript:;"&gt;
 
		&lt;div&gt;
 
			&lt;p&gt;季春二九&lt;/p&gt;
 
			&lt;p&gt;点击访问&lt;/p&gt;
 
		&lt;/div&gt;
 
	&lt;/a&gt;
 
	&lt;a target="_blank" href="javascript:;"&gt;
 
		&lt;div&gt;
 
			&lt;p&gt;季春二九&lt;/p&gt;
 
			&lt;p&gt;点击访问&lt;/p&gt;
 
		&lt;/div&gt;
 
	&lt;/a&gt;
 
	&lt;a target="_blank" href="javascript:;"&gt;
 
		&lt;div&gt;
 
			&lt;p&gt;季春二九&lt;/p&gt;
 
			&lt;p&gt;点击访问&lt;/p&gt;
 
		&lt;/div&gt;
 
	&lt;/a&gt;
 
	&lt;a target="_blank" href="javascript:;"&gt;
 
		&lt;div&gt;
 
			&lt;p&gt;季春二九&lt;/p&gt;
 
			&lt;p&gt;点击访问&lt;/p&gt;
 
		&lt;/div&gt;
 
	&lt;/a&gt;
 
	&lt;a target="_blank" href="javascript:;"&gt;
 
		&lt;div&gt;
 
			&lt;p&gt;广告招租&lt;/p&gt;
 
			&lt;p&gt;点击咨询&lt;/p&gt;
 
		&lt;/div&gt;
 
	&lt;/a&gt;
 
	&lt;a target="_blank" href="javascript:;"&gt;
 
		&lt;div&gt;
 
			&lt;p&gt;广告招租&lt;/p&gt;
 
			&lt;p&gt;点击咨询&lt;/p&gt;
 
		&lt;/div&gt;
 
	&lt;/a&gt;
 
	&lt;a target="_blank" href="javascript:;"&gt;
 
		&lt;div&gt;
 
			&lt;p&gt;广告招租&lt;/p&gt;
 
			&lt;p&gt;点击咨询&lt;/p&gt;
 
		&lt;/div&gt;
 
	&lt;/a&gt;
 
	&lt;a target="_blank" href="javascript:;"&gt;
 
		&lt;div&gt;
 
			&lt;p&gt;广告招租&lt;/p&gt;
 
			&lt;p&gt;点击咨询&lt;/p&gt;
 
		&lt;/div&gt;
 
	&lt;/a&gt;
 
	&lt;a target="_blank" href="javascript:;"&gt;
 
		&lt;div&gt;
 
			&lt;p&gt;广告招租&lt;/p&gt;
 
			&lt;p&gt;点击咨询&lt;/p&gt;
 
		&lt;/div&gt;
 
	&lt;/a&gt;
 
&lt;/div&gt;

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

代码优化