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

本文最后更新于: 2020年9月22日 by: 阿喵。如果资源失效可联系我们处理

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

Hello，大家好，实在闲的没事干，用了十来分钟，简单写了这个文字广告代码分享给大家，列数为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;APP喵&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;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

<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>

</div>

</a>

<div>

</div>

</a>

<div>

</div>

</a>

<div>

</div>

</a>

<div>

</div>

</a>

<div>

</div>

</a>

<div>

</div>

</a>

<div>

</div>

</a>

<div>

</div>

</a>

<div>

</div>

</a>

</div>

本文链接：Click here to view the current URL
声明：本站资源都是阿喵整理的。网站内容无限制免费下载，无需登录。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集。请支持正版！如若侵犯了您的合法权益，可联系我们处理。

{{userData.name}}已认证

实现wordpress网站全站变灰代码

投稿文章发布模板

福无双至，祸不单行啊，被攻击了

Process Lasso Pro v10.4.6.20 破解版

Stable Diffusion XL | NVIDIA NGC英伟达出品的免费AI绘画网站

{{userData.name}}已认证

相关文章

实现wordpress网站全站变灰代码

投稿文章发布模板

WordPress插件-WP Rocket V3.3.5.1最新绿色汉化版

B2主题：自定义字段如何使用

B2主题圈子添加轮播图

网站不让非手机用户访问，代码