一段漂亮的文字AD标签代码分享

02830
一段漂亮的文字AD标签代码分享插图

一段漂亮的会按照顺序自动跳转切换的标签AD代码，同时也是自适应大小布局，觉得挺好看的，就给大家分享出来吧！

HTML:

<div class="topics visible-lg-block"><div class="topics-cont"> 
    <a href="https://soujiz.com/jishu" target="_blank">
    <span>ECS</span> 云服务器</a> 
    <a href="https://www.soujiz.com" target="_blank">
    <span>CDN</span> 又拍云OSS</a> 
    <a href="https://www.soujiz.com/" target="_blank"><span>blog</span> 大雄搜集站</a>
    <a href="#" target="_blank"><span>Redis</span> 云数据库</a> 
    <a href="#" target="_blank"><span>CDN</span> 内容分发</a> 
    <a href="#" target="_blank"><span>OSS</span> 对象存储</a> 
    <a href="#" target="_blank"><span>SLB</span> 负载均衡</a> 
    <a href="#" target="_blank"><span>DNS</span> 云解析</a> 
    <a href="https://www.soujiz.com/wordpress" target="_blank">
    <span>WP</span> zibll子比主题</a> 
    <a href="#" target="_blank"><span>MAIL</span> 企业邮箱</a> 
    <a href="#" target="_blank"><span>WAF</span> 应用防火墙</a> 
    <a href="#" target="_blank"><span>DDoS</span> 高防</a> 
    <a href="#" target="_blank"><span>SMS</span> 短信包</a> 
    <a href="#" target="_blank"><span>MK</span> 云市场</a> 
    <a href="#" target="_blank"><span>XIN</span> 心选</a> 
    <a href="#" target="_blank"><span>IM</span> 商标注册</a> 
    <a href="https://www.soujiz.com" target="_blank"><span>JZ</span> 自营</a></div></div>
<div class="topics visible-lg-block"><div class="topics-cont"> 
    <a href="https://soujiz.com/jishu" target="_blank">
    <span>ECS</span> 云服务器</a> 
    <a href="https://www.soujiz.com" target="_blank">
    <span>CDN</span> 又拍云OSS</a> 
    <a href="https://www.soujiz.com/" target="_blank"><span>blog</span> 大雄搜集站</a>
    <a href="#" target="_blank"><span>Redis</span> 云数据库</a> 
    <a href="#" target="_blank"><span>CDN</span> 内容分发</a> 
    <a href="#" target="_blank"><span>OSS</span> 对象存储</a> 
    <a href="#" target="_blank"><span>SLB</span> 负载均衡</a> 
    <a href="#" target="_blank"><span>DNS</span> 云解析</a> 
    <a href="https://www.soujiz.com/wordpress" target="_blank">
    <span>WP</span> zibll子比主题</a> 
    <a href="#" target="_blank"><span>MAIL</span> 企业邮箱</a> 
    <a href="#" target="_blank"><span>WAF</span> 应用防火墙</a> 
    <a href="#" target="_blank"><span>DDoS</span> 高防</a> 
    <a href="#" target="_blank"><span>SMS</span> 短信包</a> 
    <a href="#" target="_blank"><span>MK</span> 云市场</a> 
    <a href="#" target="_blank"><span>XIN</span> 心选</a> 
    <a href="#" target="_blank"><span>IM</span> 商标注册</a> 
    <a href="https://www.soujiz.com" target="_blank"><span>JZ</span> 自营</a></div></div>
<div class="topics visible-lg-block"><div class="topics-cont"> 
		<a href="https://soujiz.com/jishu" target="_blank">
		<span>ECS</span> 云服务器</a> 
		<a href="https://www.soujiz.com" target="_blank">
		<span>CDN</span> 又拍云OSS</a> 
		<a href="https://www.soujiz.com/" target="_blank"><span>blog</span> 大雄搜集站</a>
		<a href="#" target="_blank"><span>Redis</span> 云数据库</a> 
		<a href="#" target="_blank"><span>CDN</span> 内容分发</a> 
		<a href="#" target="_blank"><span>OSS</span> 对象存储</a> 
		<a href="#" target="_blank"><span>SLB</span> 负载均衡</a> 
		<a href="#" target="_blank"><span>DNS</span> 云解析</a> 
		<a href="https://www.soujiz.com/wordpress" target="_blank">
		<span>WP</span> zibll子比主题</a> 
		<a href="#" target="_blank"><span>MAIL</span> 企业邮箱</a> 
		<a href="#" target="_blank"><span>WAF</span> 应用防火墙</a> 
		<a href="#" target="_blank"><span>DDoS</span> 高防</a> 
		<a href="#" target="_blank"><span>SMS</span> 短信包</a> 
		<a href="#" target="_blank"><span>MK</span> 云市场</a> 
		<a href="#" target="_blank"><span>XIN</span> 心选</a> 
		<a href="#" target="_blank"><span>IM</span> 商标注册</a> 
		<a href="https://www.soujiz.com" target="_blank"><span>JZ</span> 自营</a></div></div>

CSS样式代码：

  /* 大雄搜集站-www.soujiz.com */
      .topics {
        background:#fff;
        border-radius:3px;
        overflow:hidden
      }
      .topics .topics-cont a {
        display:inline-block;
        white-space:nowrap;
        padding:2px 5px;
        border-radius:3px;
        margin:10px 0 0 10px;
        font-size:13px;
        line-height:1.8;
        color:#656565
      }
      .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
      }
      /* 大雄搜集站-www.soujiz.com */
      .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
      }
      /* 大雄搜集站-www.soujiz.com */
      .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 .topics-cont {
        max-height:90px;
        overflow:hidden
      }
  /* 大雄搜集站-www.soujiz.com */
      .topics {
        background:#fff;
        border-radius:3px;
        overflow:hidden
      }
      .topics .topics-cont a {
        display:inline-block;
        white-space:nowrap;
        padding:2px 5px;
        border-radius:3px;
        margin:10px 0 0 10px;
        font-size:13px;
        line-height:1.8;
        color:#656565
      }
      .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
      }
      /* 大雄搜集站-www.soujiz.com */
      .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
      }
      /* 大雄搜集站-www.soujiz.com */
      .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 .topics-cont {
        max-height:90px;
        overflow:hidden
      }
	/* 大雄搜集站-www.soujiz.com */
			.topics {
			  background:#fff;
			  border-radius:3px;
			  overflow:hidden
			}
			.topics .topics-cont a {
			  display:inline-block;
			  white-space:nowrap;
			  padding:2px 5px;
			  border-radius:3px;
			  margin:10px 0 0 10px;
			  font-size:13px;
			  line-height:1.8;
			  color:#656565
			}
			.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
			}
			/* 大雄搜集站-www.soujiz.com */
			.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
			}
			/* 大雄搜集站-www.soujiz.com */
			.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 .topics-cont {
			  max-height:90px;
			  overflow:hidden
			}

© 版权声明
版权声明 本站名称：大雄搜集站
本站永久网址：https://soujiz.com
1 本站资源大多存储在云盘，如有链接失效，请留言反馈站长更新！
2 本站各种资源及源码软件大部分为网络搜集而来，如有侵犯版权的，请邮件与我们联系，本站将予以改正。
3 由于网络资源有极快的复制性，付费资源一经购买 ，不以任何形式退款，购买过程中如有付费资源失效，请及时联系站长。
THE END
主题美化
喜欢点个赞支持一下吧
点赞0赏币 分享
Behind every beautiful life, there has been some kind of pain.
破茧成蝶的美好生活都有伤痛
大雄的头像-大雄搜集站钻石会员
相关推荐
评论交流 抢沙发

请登录后发表评论

    暂无评论内容

AI影视导航
企业内训系统|员工在线学习平台|企事业单位及机关部门内部训-大雄搜集站

1企业内训系统|员工在线学习平台|企事业单位及机关部门内部训

微厦科技的头像-大雄搜集站2年前
88
WordPress为文章添加字数统计时间代码-大雄搜集站

2WordPress为文章添加字数统计时间代码

大雄的头像-大雄搜集站钻石会员3年前
264
WordPress主题QUX V9.1.5 强大的资源站分享主题-大雄搜集站

3WordPress主题QUX V9.1.5 强大的资源站分享主题

大雄的头像-大雄搜集站钻石会员3年前
免费175
网站底部添加访客阅读次数总访问量在线人数代码分享-大雄搜集站

4网站底部添加访客阅读次数总访问量在线人数代码分享

大雄的头像-大雄搜集站钻石会员4年前
558
婚庆婚纱摄影工作室企业网站Wordpress主题模板-大雄搜集站

5婚庆婚纱摄影工作室企业网站WordPress主题模板

大雄的头像-大雄搜集站钻石会员3年前
123
富有科技感的vue数字时钟特效-大雄搜集站

6富有科技感的vue数字时钟特效

大雄的头像-大雄搜集站钻石会员4年前
316
TOP1
TOP2
TOP3
TOP4
TOP5
TOP6
 

AI影视导航

 
汇聚数百款全球AI工具。各种免费VIP影视免费观看
立即进入🚀
最新评论
别偷老子AD钙的头像-大雄搜集站

别偷老子AD钙16天前0

77777
巡山的头像-大雄搜集站

巡山28天前0

表情[zhemo]-大雄搜集站
MacKen的头像-大雄搜集站

MacKen28天前1

自行车v自行车
3781691s的头像-大雄搜集站

3781691s1个月前0

66666
江海寄余生的头像-大雄搜集站

江海寄余生2个月前0

111111111111111111
一***1的头像-大雄搜集站

一***12个月前0

谢谢站长
寻***央的头像-大雄搜集站

寻***央2个月前0

123478
poiuy的头像-大雄搜集站

poiuy2个月前0

夸就完事了
标签云
重装系统设计视频表白表情包舔狗日记脚本网页模板编程素材程序源码福利破解独立部署特效源码开源源码二开源码买断游戏油猴脚本摸鱼插件接码短信平台抖音影视
坚持每天来逛逛，会让你
生活也美好了！
心情也舒畅了！
走路也有劲了！
腿也不痛了！
腰也不酸了！
工作也轻松了！
你好我也好，不要忘记哦!