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

本文更新于: 2020年9月22日

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

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

声明：本站为个人非盈利博客，资源均网络收集且免费分享无限制，无需登录。资源仅供测试学习，请于24小时内删除，任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集。请支持正版！如若侵犯了您的合法权益，可联系我们处理。

{{userData.name}}已认证

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

实现wordpress网站全站变灰代码

喵语翻译：将人类语言翻译为喵语言，文本加密

CrossPaste：在任意设备间复制粘贴，就像在同一台设备上操作一样自然流畅

习题打印生成器，免费开源，帮你给孩子出题，做字帖，省时省力

网站推荐：云短信–在线短信接收

{{userData.name}}已认证

相关文章

实现wordpress网站全站变灰代码

喵语翻译：将人类语言翻译为喵语言，文本加密

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

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

B2主题圈子添加轮播图

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