分享一个网站的文字广告轮播代码，html+css实现

今天，WordPress JustNews交流群中，有人问我网站里的文字链接广告轮播是怎么实现的。今天，把代码分享给各位。文字广告轮播指的是，一定数量的文字链接每隔一段时间自动高亮显示其中一个广告。代码中，包含Html代码、css代码。此外，我做了自适应处理，即不同屏幕大小都有很好的展示效果。

代码也是从别人网站扒的，优化了下自适应功能，以及文字排布做了修改。

样式展示

Html代码

<div class="topics">
<div class="topics-cont">
<a href="https://www.ixueha.com/" target="_blank"><span>560专业课</span> 重点笔记真题资料</a>
<a href="https://www.kdun.cn/price/scdn/cn/" target="_blank"><span>高防SCDN安全加速</span> 免备案</a>
<a href="https://iymark.com/computer/windows-rhsa.html" target="_blank"><span>U盘个性化图标</span> Diy教程</a>
<a href="https://iymark.com/computer/modsec-log-delete.html" target="_blank"><span>防火墙日志清理</span> 自动化</a>
<a href="https://iymark.com/wordpress-optimize" target="_blank"><span>WordPress优化</span> 付费项目</a>
<a href="https://iymark.com/website/wordpress-ttfb-long.html" target="_blank"><span>WordPress优化思路</span> 免费查阅</a>
<a href="https://iymark.com/questions" target="_blank"><span>不懂就尽情提问</span> 有问必答</a>
<a href="https://iymark.com/donate" target="_blank"><span>广告位</span> ￥100</a>
</div>
</div>

请自行替换html代码中的文字及链接

CSS代码

免费只提供部分CSS代码，全部代码需付费购买

.topics {
	overflow: hidden;
	padding-bottom: 2px;
	border-radius: 3px;
	background: var(--member-el-bg-color);
	text-align:center;

}
.topics .topics-cont {
  margin: 7px 5px 0 5px;
}

.topics .topics-cont a {
  display: inline-block;
  padding: 2px 5px;
  color: #656565;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.8;
  background: #eee;
  border: 3px solid var(--member-el-bg-color);
}

.topics .topics-cont a span {
	color: #fe5b34;
	font-family: "Microsoft YaHei",Helvetica,Arial,"WenQuanYi Micro Hei",SimSun,sans-serif;
}

.topics .topics-cont a:hover {
	background-color: #d806da;
	background-image: -webkit-linear-gradient(left,#9796f0 0,#d806da 50%,#ff5757 100%);
	background-image: linear-gradient(to right,#9796f0 0,#d806da 50%,#ff5757 100%);
	color: #fff;
}

.topics .topics-cont a:hover span {
	color: #fff;
}

.topics .topics-cont a:nth-child(1),.topics .topics-cont a:nth-child(2),.topics .topics-cont a:nth-child(3),.topics .topics-cont a:nth-child(4),.topics .topics-cont a:nth-child(5),.topics .topics-cont a:nth-child(6),.topics .topics-cont a:nth-child(7),.topics .topics-cont a:nth-child(8) {
	animation: topic-animate 16s ease infinite;
}

.topics .topics-cont a:nth-child(1) span,.topics .topics-cont a:nth-child(2) span,.topics .topics-cont a:nth-child(3) span,.topics .topics-cont a:nth-child(4) span,.topics .topics-cont a:nth-child(5) span,.topics .topics-cont a:nth-child(6) span,.topics .topics-cont a:nth-child(7) span,.topics .topics-cont a:nth-child(8) span {
	animation: topic-animate-span 16s ease infinite;
}

.topics .topics-cont a:nth-child(2) {
	animation-delay: 2s;
}

.topics .topics-cont a:nth-child(2) span {
	animation-delay: 2s;
}

.topics .topics-cont a:nth-child(3) {
	animation-delay: 4s;
}

.topics .topics-cont a:nth-child(3) span {
	animation-delay: 4s;
}

.topics .topics-cont a:nth-child(4) {
	animation-delay: 6s;
}

.topics .topics-cont a:nth-child(4) span {
	animation-delay: 6s;
}

.topics .topics-cont a:nth-child(5) {
	animation-delay: 8s;
}

.topics .topics-cont a:nth-child(5) span {
	animation-delay: 8s;
}

.topics .topics-cont a:nth-child(6) {
	animation-delay: 10s;
}

.topics .topics-cont a:nth-child(6) span {
	animation-delay: 10s;
}

.topics .topics-cont a:nth-child(7) {
	animation-delay: 12s;
}

.topics .topics-cont a:nth-child(7) span {
	animation-delay: 12s;
}

.topics .topics-cont a:nth-child(8) {
	animation-delay: 14s;
}

.topics .topics-cont a:nth-child(8) span {
	animation-delay: 14s;
}

.topics .topics-cont:hover a,.topics .topics-cont:hover a span {
	animation: none;
}

@keyframes topic-animate {
	0%,12.5% {
		background: #eee;
		color: #555;
	}

	10%,2% {
		background-color: #d806da;
		background-image: -webkit-linear-gradient(left,#9796f0 0,#d806da 50%,#ff5757 100%);
		background-image: linear-gradient(to right,#9796f0 0,#d806da 50%,#ff5757 100%);
		color: #fff;
	}
}

@keyframes topic-animate-span {
	0%,12.5% {
		color: #fe5b34;
	}

	10%,2% {
		color: #fff;
	}
}
.topics-cont a {
    width: 25%;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width:1200px){
	.topics-cont a{
		width: 33%;
	}
}
@media (max-width:550px){
	.topics-cont a{
		width: 50%;
	}
}

上述代码中的var(--member-el-bg-color)为JustNews主题专用背景色（兼顾暗黑风格），其他主题请用具体颜色代码代替，比如#fff即可。目前代码仅支持8个链接广告，需要更多广告位的请私信联系我修改代码。

私人定制扒站计划，你发我对方的网站，我帮你把相关代码扒下来。仅限于html、css、js。付费后再联系我。

您需要付费解锁才能查看当前内容