本文由 发布,转载请注明出处,如有问题请联系我们! 发布时间: 2021-05-06给网站添加一个好看的文字里列表广告
加载中背景可以设置渐变颜色,可以自己修改。
html代码
<!--首页文字广告--> <div class="text-gg"> <a target="_blank" href="https://www.v6g.cn"> <div> <p>广告招租3RMB</p> <p>点击访问</p> </div> </a> <a target="_blank" href="javascript:;"> <div> <p>广告招租3RMB</p> <p>点击访问</p> </div> </a> <a target="_blank" href="javascript:;"> <div> <p>广告招租3RMB</p> <p>点击访问</p> </div> </a> <a target="_blank" href="javascript:;"> <div> <p>广告招租3RMB</p> <p>点击访问</p> </div> </a> <a target="_blank" href="javascript:;"> <div> <p>广告招租3RMB</p> <p>点击访问</p> </div> </a> <a target="_blank" href="javascript:;"> <div> <p>广告招租3RMB</p> <p>点击咨询</p> </div> </a> <a target="_blank" href="javascript:;"> <div> <p>广告招租3RMB</p> <p>点击咨询</p> </div> </a> <a target="_blank" href="javascript:;"> <div> <p>广告招租3RMB</p> <p>点击咨询</p> </div> </a> <a target="_blank" href="javascript:;"> <div> <p>广告招租3RMB</p> <p>点击咨询</p> </div> </a> <a target="_blank" href="javascript:;"> <div> <p>广告招租3RMB</p> <p>点击咨询</p> </div> </a> </div>
CSS代码
.text-gg{/*文字广告*/ width: 100%; overflow: hidden; display: flex; flex-wrap: wrap; border-radius:10px; } .text-gg a{ color: rgba(0,0,0,.6); font-size: 14px; font-weight: bold; line-height: 30px; text-align: center; text-decoration: none; display: block; width: 20%; height: 30px; overflow: hidden; position: relative; margin: 1px 0; } .text-gg a div{ width: 100%; height: 60px; padding: 1px; box-sizing: border-box; position: absolute; top: 0; left: 0; transition: all .2s; } .text-gg a:hover div{ transition: all .3s; color: #fff; top: -40px; text-shadow: 0 2px 3px rgba(0,0,0,.6); } .text-gg a div :nth-child(1){ background: linear-gradient(to right,#ffc0cb, #fff,#ffc0cb); } .text-gg a div :nth-child(2){ background: linear-gradient(to right,#aedefc,#b4b4ff); }
代码放到网站头部就可以使用了,css你可以写入全局加载里面,也可以直接写在头部,不过要加一个<style>标签