其实这个广告样式在之前的ACG美化插件中就有的，但是我开启会不在我想要的的位置，所以我就去网上取经。
代码 后台-小工具-顶部全区块-自定义HTML：
<div class="n_banner_inner"> <div class="img-info">! <div class="info">也想出现在这里？ <a rel="nofollow noopener noreferrer" href="转跳Url" target="_blank">联系我们</a>吧</div> </div> <a href="前往Url" target="_blank" rel="noopener noreferrer"> <div class="Banner-adTag">广告</div> <img class="tirr" src="https://www.haigs.cc/wp-content/uploads/2023/06/2023061715004338.png" alt="信息"> </a> </div> <style> /*定位*/ .n_banner_inner { position: relative; } /*提示信息*/ .n_banner_inner .img-info { position: absolute; right: 12px; top: 9px; padding: 0; text-align: right; color: #fff; } .n_banner_inner .img-info i { position: relative; display: inline-block; color: #007bff; font-size: 20px; line-height: 19px; text-align: center; z-index: 9; font-style: inherit; } .n_banner_inner .img-info .info { position: absolute; bottom: 5px; right: 0; width: 0; padding: 5px 0; overflow: hidden; background: #007bff; border-radius: 10px; line-height: 10px; text-align: center; font-size: 10px; color: #fff; white-space: nowrap; -webkit-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -moz-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -ms-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -o-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; } .n_banner_inner .img-info .info a { color: #fff; } .n_banner_inner .tirr { max-width: 100%; height: auto; transition: 0.5s; border-radius: 5px; } /*触发Hover*/ .n_banner_inner:hover .info { width: auto; padding: 5px 23px 5px 12px; -webkit-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -moz-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -ms-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -o-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; font-size: 12px; z-index: 1; } .n_banner_inner img:hover { filter: brightness(50%); } /*出发声明hover*/ .n_banner_inner .info:hover a { color: red; text-decoration: none; } /*左下角广告*/ .n_banner_inner .Banner-adTag { position: absolute; left: 5px; bottom: 5px; width: 50px; border: 1px solid #ebebeb; border-radius: 3px; color: #ebebeb; opacity: 0.5; font-size: 12px; line-height: 20px; text-align: center; } @media screen and (max-width: 768px) { .n_banner_inner .img-info { display: none; } } .container { width: 100%; } .zib-widget { clear: both; background: var(--main-bg-color); padding: 0px; box-shadow: 0 0 0px var(--main-shadow); border-radius: var(--main-radius); margin-bottom: 20px; } </style>
新增引入会员购买页弹窗：
<div class="n_banner_inner"> <div class="img-info">! <div class="info">也想出现在这里？ <a rel="nofollow noopener noreferrer" href="https://wpa.qq.com/msgrd?v=3&uin=82719519&site=qq&menu=yes&jumpflag=1" target="_blank">联系我们</a>吧</div> </div> <a class="pay-vip" href="javascript:;"> <div class="Banner-adTag">广告</div> <img class="tirr" src="https://www.haigs.cc/wp-content/uploads/2023/06/2023061715004338.png" alt="信息"> </a> </div> <style> /*定位*/ .n_banner_inner { position: relative; } /*提示信息*/ .n_banner_inner .img-info { position: absolute; right: 12px; top: 9px; padding: 0; text-align: right; color: #fff; } .n_banner_inner .img-info i { position: relative; display: inline-block; color: #007bff; font-size: 20px; line-height: 19px; text-align: center; z-index: 9; font-style: inherit; } .n_banner_inner .img-info .info { position: absolute; bottom: 5px; right: 0; width: 0; padding: 5px 0; overflow: hidden; background: #007bff; border-radius: 10px; line-height: 10px; text-align: center; font-size: 10px; color: #fff; white-space: nowrap; -webkit-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -moz-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -ms-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -o-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; } .n_banner_inner .img-info .info a { color: #fff; } .n_banner_inner .tirr { max-width: 100%; height: auto; transition: 0.5s; border-radius: 5px; } /*触发Hover*/ .n_banner_inner:hover .info { width: auto; padding: 5px 23px 5px 12px; -webkit-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -moz-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -ms-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -o-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; font-size: 12px; z-index: 1; } .n_banner_inner img:hover { filter: brightness(50%); } /*出发声明hover*/ .n_banner_inner .info:hover a { color: red; text-decoration: none; } /*左下角广告*/ .n_banner_inner .Banner-adTag { position: absolute; left: 5px; bottom: 5px; width: 50px; border: 1px solid #ebebeb; border-radius: 3px; color: #ebebeb; opacity: 0.5; font-size: 12px; line-height: 20px; text-align: center; } @media screen and (max-width: 768px) { .n_banner_inner .img-info { display: none; } } .container { width: 100%; } .zib-widget { clear: both; background: #fff0; padding: 0px; box-shadow: 0 0 0px var(--main-shadow); border-radius: var(--main-radius); margin-bottom: 20px; } </style>
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
