![图片[1]-【子比】开通会员引导横幅-330B模板网](https://www.330b.com/wp-content/uploads/2026/01/1768905082438-1024x106.png)
<style>
.tengfei-vip-box{position:relative;width:100%;height:130px;background:#e0f2fe;margin:0 auto;border-radius:10px;overflow:hidden;box-sizing:border-box}.tengfei-vip-box::after{position:absolute;top:0;left:0;transform:translate(-50%,-50%);content:"";width:100px;height:100px;border-radius:50%;background:#0284c7;z-index:1;opacity:0.15}.tengfei-vip-box::before{position:absolute;bottom:0;right:0;transform:translate(50%,50%);content:"";width:180px;height:180px;border-radius:50%;background:#0284c7;z-index:1;opacity:0.15}.tengfei-vip-box > .tengfei-vip-left-icon > i{position:absolute;font-size:100px;z-index:1;color:#0284c7;top:50%;transform:translateY(-50%);left:50px}.tengfei-vip-box > .tengfei-vip-left-text{position:absolute;left:180px;height:100%}.tengfei-vip-box > .tengfei-vip-left-text h2{color:#0284c7;font-size:23px;margin-top:30px;font-weight:400}.tengfei-vip-box > .tengfei-vip-left-text ul{margin:0;padding:0;margin-top:12px}.tengfei-vip-box > .tengfei-vip-left-text ul li{display:inline-block;list-style:none;padding:0 5px;color:#0284c7;transform:translateX(-7px)}.tengfei-vip-box > .tengfei-vip-left-text ul li i{margin-right:8px}.tengfei-vip-box > .tengfei-vip-right-btn{position:absolute;height:35px;width:130px;line-height:33px;text-align:center;text-decoration:none;font-style:normal;background-color:#0284c7;color:#fff;right:100px;top:50%;transform:translateY(-50%);border-radius:30px}.tengfei-vip-box > .tengfei-vip-right-btn span{font-size:18px;text-align:center}.tengfei-vip-box > .tengfei-vip-right-btn i{font-size:20px;margin-left:3px}.tengfei-vip-box > .tengfei-vip-icons li{list-style:none;color:#0284c7;opacity:0.3;position:absolute}.tengfei-vip-box > .tengfei-vip-icons li:nth-child(1){top:10%;left:45%;font-size:24px;transform:rotate(-20deg)}.tengfei-vip-box > .tengfei-vip-icons li:nth-child(2){top:60%;left:55%;font-size:24px;transform:rotate(10deg)}.tengfei-vip-box > .tengfei-vip-icons li:nth-child(3){top:30%;left:70%;font-size:20px;transform:rotate(35deg)}@media screen and (max-width:768px){.tengfei-vip-box{height:180px;padding:0}.tengfei-vip-box > .tengfei-vip-left-icon > i{top:-3px;transform:translateX(-50%);left:50%;font-size:50px}.tengfei-vip-box > .tengfei-vip-left-text{top:30px;transform:translateX(-50%);left:50%;width:100%;text-align:center}.tengfei-vip-box > .tengfei-vip-left-text h2{font-size:20px;text-align:center}.tengfei-vip-box > .tengfei-vip-left-text ul{margin-top:5px}.tengfei-vip-box > .tengfei-vip-left-text li{font-size:13px;text-align:center}.tengfei-vip-box > .tengfei-vip-right-btn{top:130px;right:50%;transform:translateX(50%)}.tengfei-vip-box > .tengfei-vip-right-btn{top:130px;height:28px;line-height:26px;width:100px;text-align:center}.tengfei-vip-box > .tengfei-vip-right-btn i{font-size:15px;margin-left:0px}.tengfei-vip-box > .tengfei-vip-right-btn span{font-size:15px}}
</style>
<div class="tengfei-vip-box">
<div class="tengfei-vip-left-icon">
<i class="iconfont icon-f-vip">
</i>
</div>
<div class="tengfei-vip-left-text">
<h2>
开通会员,享更多权益!
</h2>
<ul>
<li>
<i class="iconfont icon-Gc_115_face-Star">
</i>
专享内容
</li>
<li>
<i class="fa fa-wechat" aria-hidden="true">
</i>
技术支持
</li>
<li>
<i class="iconfont icon-gouwuche1">
</i>
会员折扣
</li>
<li>
<i class="fa fa-vimeo" aria-hidden="true" >
</i>
认证标识
</li>
<li>
<i class="fa fa-heart" aria-hidden="true">
</i>
超多福利
</li>
</ul>
</div>
<a class="tengfei-vip-right-btn" href="/vip-2">
<span>
开通会员
</span>
<i class="iconfont icon-jiantou_youshang">
</i>
</a>
<ul class="tengfei-vip-icons">
<li>
<i class="iconfont icon-VIP">
</i>
</li>
<li>
<i class="iconfont icon-f-vip">
</i>
</li>
<li>
<i class="iconfont icon-rocket">
</i>
</li>
</ul>
</div>
⚠️
温馨提示:部分资源来源互联网搬运,330B模板网不能全部测试,遇到源码有授权加密以及后门,请放弃使用,本站不会添加任何后门。请勿相信源码里的广告QQ以及其他联系方式,以免被骗!
1.本站代码模板仅供学习交流使用,商用请支持正版!2.源码下载后请在24小时内删除,严禁从事违法、侵权等任何非法活动,否则法律后果自负!
THE END















暂无评论内容