子比主题 – 单行与双行的文字广告位代码-识趣者资源

子比主题 – 单行与双行的文字广告位代码

7036字 36分钟 2025-12-13 识趣资源 52 0 该作者已发布498篇文章

这是一篇子比主题单行和双行的文字广告位样式代码，我觉得还是不错的，尤其是昼夜模式，他有一个缓慢的时间去消失，可能说的不是很清楚，看如下动图就可以，这个广告位也适配了手机端，喜欢的自行部署吧！

单行

双行

此处内容已隐藏，请评论后刷新页面查看.

单行

双行

<div class="topics">
    <div class="topics-cont">
        <a href="https://www.tfbkw.com" target="_blank">
      <span>腾飞博客 </span>招租中
    </a>
        <a href="https://www.tfbkw.com" target="_blank">
      <span>腾飞博客 </span>招租中
    </a>
        <a href="https://www.tfbkw.com" target="_blank">
      <span>腾飞博客 </span>招租中
    </a>
        <a href="https://www.tfbkw.com" target="_blank">
      <span>腾飞博客 </span>招租中
    </a>
    </div>
</div>
<style>
.topics{overflow:hidden;padding-bottom:2px;border-radius:3px;text-align:center}.topics .topics-cont{margin-bottom:8px}.topics .topics-cont a{display:inline-block;margin:10px 10px 0;padding:2px 5px;border-radius:3px;color:#656565;white-space:nowrap;font-size:13px;line-height:1.8;font-weight:700}.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 8s 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 8s 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:#fff;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:20%;overflow:hidden;text-overflow:ellipsis}@media (max-width:1200px){.topics-cont a{width:30%}}@media (max-width:550px){.topics-cont a{width:40%}}
</style>

<div class="topics">
   <div class="topics-cont">
        <a href="https://www.tfbkw.com" target="_blank"><span>广告招租中</span> 点此</a>
        <a href="https://www.tfbkw.com" target="_blank"><span>广告招租中</span> 点此</a>
        <a href="https://www.tfbkw.com" target="_blank"><span>广告招租中</span> 点此</a>
        <a href="https://www.tfbkw.com" target="_blank"><span>广告招租中</span> 点此</a>
        <a href="https://www.tfbkw.com" target="_blank"><span>广告招租中</span> 点此</a>
        <a href="https://www.tfbkw.com" target="_blank"><span>广告招租中</span> 点此</a>
        <a href="https://www.tfbkw.com" target="_blank"><span>广告招租中</span> 点此</a>
        <a href="https://www.tfbkw.com" target="_blank"><span>广告招租中</span> 点此</a>
    </div>
</div>
<style>
.topics{overflow:hidden;padding-bottom:2px;border-radius:3px;background:var(--theme-el-bg-color);text-align:center}.topics .topics-cont{margin-bottom:8px}.topics .topics-cont a{display:inline-block;margin:10px 10px 0;padding:2px 5px;border-radius:3px;color:#656565;white-space:nowrap;font-size:13px;line-height:1.8}.topics .topics-cont a span{color:#fe5b34}.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:#fff;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:20%;overflow:hidden;text-overflow:ellipsis}@media (max-width:1200px){.topics-cont a{width:30%}}@media (max-width:550px){.topics-cont a{width:40%}}
</style>

文章版权声明 1 本网站名称：识趣资源
2 本站永久网址：https://47zhe.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ909299991进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END