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

4
(5)

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

分享一个网站的文字广告轮播代码,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。付费后再联系我。

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

黄金会员黄金会员¥15.00
钻石会员钻石会员¥6.00
已付费?登录刷新

共计5人评分,平均4

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

文章目录

原创文章,作者:古哥,转载需经过作者授权同意,并附上原文链接:https://iymark.com/articles/4338.html

(0)
微信公众号
古哥的头像古哥管理团队
上一篇 2023年03月14日 20:31
下一篇 2023年03月15日 19:57

你可能感兴趣的文章

发表回复

登录后才能评论

评论列表(3条)

  • 剑心的头像
    剑心 2024年04月09日 23:48

    古哥,以上广告就只显示4个,CSS该如何修改呢?我想让动画只循环前四个。应该删除哪里?

    微信小程序
    微信公众号