成为VIP
代码部署
直接将下面的代码丢到：WP后台–>>外观–>>小工具–>>自定义HTML即可！
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.member-card-container{max-width:100%;margin:0 auto;padding:10px}.member-st{width:100%;border-radius:12px;overflow:hidden;position:relative;background:linear-gradient(to right,#e0f2fe,#bae6fd);border:1px solid rgba(2,132,199,0.1);box-shadow:0 10px 25px -5px rgba(2,132,199,0.1),0 8px 10px -6px rgba(2,132,199,0.1)}.corner-decoration{position:absolute;width:60px;height:60px;background-color:rgba(255,255,255,0.2);z-index:5}.top-left{top:0;left:0;border-radius:0 0 60px 0}.top-right{top:0;right:0;border-radius:0 0 0 60px}.bottom-left{bottom:0;left:0;border-radius:0 60px 0 0}.bottom-right{bottom:0;right:0;border-radius:60px 0 0 0}.member-bgbox{position:absolute;inset:0;background-image:radial-gradient(rgba(2,132,199,0.06) 1px,transparent 1px);background-size:20px 20px;opacity:0.3}.decor-icon{position:absolute;color:rgba(2,132,199,0.2)}.icon-user{top:16px;left:16px;font-size:40px}.icon-diamond{bottom:16px;right:16px;font-size:40px}.icon-rocket{top:50%;left:50%;transform:translate(-50%,-50%);font-size:56px}.member-content{position:relative;z-index:10;padding:36px 24px 24px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:24px}@media (min-width:768px){.member-content{flex-direction:row}}.member-iconbox{font-size:48px;color:#0284c7}.member-title{flex-grow:1;text-align:center}@media (min-width:768px){.member-title{text-align:left}}.titbadge{display:inline-flex;align-items:center;gap:8px;font-size:20px;font-weight:bold;color:#0f172a;text-shadow:0 2px 4px rgba(0,0,0,0.1);margin-bottom:16px}.member-descsp{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;color:rgba(15,23,42,0.8)}@media (min-width:768px){.member-descsp{justify-content:flex-start}}.benefit-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(255,255,255,0.5);border-radius:20px;backdrop-filter:blur(4px)}.benefit-icon{color:#0284c7}.member-btnbox{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}@media (min-width:768px){.member-btnbox{align-items:flex-end;width:auto}}.member-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:#0284c7;color:white;border-radius:24px;font-weight:500;text-decoration:none;box-shadow:0 4px 6px -1px rgba(2,132,199,0.2);width:100%;justify-content:center}@media (min-width:768px){.member-btn{width:auto}}
</style>
<div class="member-card-container">
<div class="member-st">
<div class="corner-decoration top-left"></div>
<div class="corner-decoration top-right"></div>
<div class="corner-decoration bottom-left"></div>
<div class="corner-decoration bottom-right"></div>
<div class="member-bgbox"></div>
<i class="fa fa-user-circle decor-icon icon-user"></i>
<i class="fa fa-diamond decor-icon icon-diamond"></i>
<i class="fa fa-rocket decor-icon icon-rocket"></i>
<div class="member-content">
<div class="member-iconbox">
<i class="fa fa-diamond"></i>
</div>
<div class="member-title">
<div class="member-descsp">
<div class="benefit-item">
<i class="fa fa-lock benefit-icon"></i>
<span>专享内容</span>
</div>
<div class="benefit-item">
<i class="fa fa-bolt benefit-icon"></i>
<span>优先支持</span>
</div>
<div class="benefit-item">
<i class="fa fa-tag benefit-icon"></i>
<span>会员折扣</span>
</div>
</div>
</div>
<div class="member-btnbox">
<a href="/" class="member-btn">
<span class="btn-text" id="member-action">续费/升级</span>
<i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
到此轩玮博客提示教程结束！！！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
评论(0)