| 分享一个网站的文字广告轮播代码，html+css实现 | 您所在的位置：网站首页 › i站网站链接 › 分享一个网站的文字广告轮播代码，html+css实现 |
分享一个网站的文字广告轮播代码，html+css实现
|
文章目录 展开 样式展示Html代码CSS代码 4.8 (4)今天，WordPress JustNews交流群中，有人问我网站里的文字链接广告轮播是怎么实现的。今天，把代码分享给各位。文字广告轮播指的是，一定数量的文字链接每隔一段时间自动高亮显示其中一个广告。代码中，包含Html代码、css代码。此外，我做了自适应处理，即不同屏幕大小都有很好的展示效果。  代码也是从别人网站扒的，优化了下自适应功能，以及文字排布做了修改。 样式展示大屏样式中屏样式小屏样式Html代码
560专业课 重点笔记真题资料
高防SCDN安全加速 免备案
U盘个性化图标 Diy教程
防火墙日志清理 自动化
WordPress优化 付费项目
WordPress优化思路 免费查阅
不懂就尽情提问 有问必答
广告位 ￥100
请自行替换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已付费？登录 或 刷新 共计4人评分，平均4.8分 到目前为止还没有投票~ 很抱歉，这篇文章对您没有用！ 让我们改善这篇文章！ 告诉我们我们如何改善这篇文章？ 原创文章，作者：古哥，转载需经过作者授权同意，并附上原文链接：https://iymark.com/program/css/html-css-light-link.html |
【本文地址】
公司简介
联系我们