联系站长
文章
文章用户商铺文档快讯圈子网址导航

子比主题美化 – 首页底部导航登入美化

子比主题美化 – 首页底部导航登入美化

这个是电脑端展示的一款子比底部导航引导登入，这个美化是扒过来的，但是我给他小改了一下，因为代码有点小问题，然后满足不了我的需求，所以我改了之后发了这篇文章，如下图，底部一键登入注册，我加了点判断，如果用户是登入的情况下不显示这个。喜欢的自行部署吧

[hidecontent type=”reply”]
  • func.php
  • youlogin.css
    • // 子比主题底部登入美化样式
    function zibll_enqueue_styles() {
        wp_enqueue_style('tengfei_bottom_login_styles', get_template_directory_uri() . '/css/youlogin.css');
    }
    add_action('wp_enqueue_scripts', 'zibll_enqueue_styles'); 

    function zibll_Add_ons_footer_sidebar_display() {
        if (is_user_logged_in()) {
            return; 
        }

        $sidebar_html = '
        <div class="wapnone">
        <div class="footSideBar footNoSideBar" style="" data-v-468191f6="">
            <div class="left_warp">
                <p class="left_word">一键注册登录，免费下载更多的资源教程</p>
                <ul class="login_ad_list">
                    <li class="login_ad_item">
                        <img src="//pub-cdn-oss.chuangkit.com/ad_position/07b0bea0b5ff4a4a868214402dffbe06" width="16" height="16">
                        <span>子比主题教程美化</span>
                    </li>
                    <li class="login_ad_item">
                        <img src="//pub-cdn-oss.chuangkit.com/ad_position/aa87fcf0c39d491d87776f9ff9c7605c" width="16" height="16">
                        <span>精品源码资源</span>
                    </li>
                    <li class="login_ad_item">
                        <img src="//pub-cdn-oss.chuangkit.com/ad_position/c9fd421689dc4a3598665a44da2967b4" width="16" height="16">
                        <span>注册登录可参加抽奖活动</span>
                    </li>
                    <li class="login_ad_item">
                        <img src="//pub-cdn-oss.chuangkit.com/ad_position/90d13eaff9644a67a6dbeb060114d90b" width="16" height="16">
                        <span>关注心动次元你想要的这里都有</span>
                    </li>
                </ul>
            </div>
            <div class="login-button signin-loader">
                <div class="login-button_wrapper">
                    <span>立即登录</span>
                    <div class="circle circle-1"></div>
                    <div class="circle circle-2"></div>
                    <div class="circle circle-3"></div>
                    <div class="circle circle-4"></div>
                    <div class="circle circle-5"></div>
                    <div class="circle circle-6"></div>
                    <div class="circle circle-7"></div>
                    <div class="circle circle-8"></div>
                    <div class="circle circle-9"></div>
                    <div class="circle circle-10"></div>
                    <div class="circle circle-11"></div>
                    <div class="circle circle-12"></div>
                </div>
            </div>
        </div>
    </div>
        ';

        echo $sidebar_html; 
    }
    add_action('wp_footer', 'zibll_Add_ons_footer_sidebar_display');

    在/wp-content/themes/nuoyo.cn/css目录下新建一个名为youlogin.css的文件

    .footSideBar[data-v-468191f6] {
  position: fixed;
  margin: auto;
  left: 0;
  right: 0;
  -webkit-box-pack: justify;
  justify-content: space-between;
  bottom: 40px;
  width: 1040px;
  height: 76px;
  background: rgba(27,35,55,.4);
  box-shadow: 0 2px 18px rgba(42,49,67,.05);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  border-radius: 18px;
  z-index: 99999;
  transition: 0.5s ease-in-out;
}

.footSideBar {
  position: fixed;
  z-index: 1000;
  left: calc(50% + 110px);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  bottom: 24px;
  display: -webkit-box;
  display: flex;
  width: 932px;
  height: 80px;
  padding: 0 24px 0 32px;
  border-radius: 16px;
  background: rgba(27,35,55,.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px)
}

.footSideBar:hover {
  background: rgba(27,35,55,.9);
    transition: 0.5s ease-in-out;
}

.footSideBar .left_warp .left_word {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #fff
}

.footSideBar .left_warp .login_ad_list {
  margin-top: 6px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center
}

.footSideBar .left_warp .login_ad_list .login_ad_item {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center
}

.footSideBar .left_warp .login_ad_list .login_ad_item span {
  margin-left: 6px;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.footSideBar .left_warp .login_ad_list .login_ad_item:not(:last-child) {
  margin-right: 24px
}

.footSideBar .login-button {
  display: -webkit-box;
  display: flex;
  width: 140px;
  height: 44px;
  border-radius: 40px;
  background: #c3d3ff;
  --duration: 7s;
  --easing: linear;
  --c-color-1: rgba(78,255,233,0.7);
  --c-color-2: #1a23ff;
  --c-color-3: #7553ff;
  --c-color-4: rgba(86,255,234,0.7);
  --c-shadow: rgba(22,201,180,0.2);
  --c-shadow-inset-top: rgba(60,255,231,0.9);
  --c-shadow-inset-bottom: rgba(106,255,237,0.8);
  --c-radial-inner: #579df7;
  --c-radial-outer: #579df7;
  --c-color: #fff;
  outline: none;
  position: relative;
  cursor: pointer;
  border: none;
  display: table;
  padding: 0;
  margin: 0;
  text-align: center;
  letter-spacing: .02em;
  line-height: 1.5;
  color: var(--c-color);
  background: radial-gradient(circle,var(--c-radial-inner),var(--c-radial-outer) 80%);
  box-shadow: 0 0 14px var(--c-shadow)
}

.footSideBar .login-button,.footSideBar .login-button span {
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  font-weight: 600;
  font-size: 16px
}

.footSideBar .login-button span {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  line-height: 24px;
  display: -webkit-box;
  display: flex
}

.footSideBar .login-button:before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 40px;
  box-shadow: inset 0 3px 12px var(--c-shadow-inset-top),inset 0 -3px 4px var(--c-shadow-inset-bottom)
}

.footSideBar .login-button .login-button_wrapper {
  -webkit-mask-image: -webkit-radial-gradient(#fff,#000);
  overflow: hidden;
  border-radius: 40px;
  min-width: 140px;
  padding: 10px 0
}

.footSideBar .login-button .login-button_wrapper span {
  position: relative;
  z-index: 1
}

.footSideBar .login-button:hover {
  --duration: 1400ms
}

.footSideBar .login-button .login-button_wrapper .circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -webkit-filter: blur(8px);
  filter: blur(8px);
  -webkit-filter: blur(var(--blur,8px));
  filter: blur(var(--blur,8px));
  background: transparent;
  background: var(--background,transparent);
  -webkit-transform: translate(0) translateZ(0);
  transform: translate(0) translateZ(0);
  -webkit-transform: translate(var(--x,0),var(--y,0)) translateZ(0);
  transform: translate(var(--x,0),var(--y,0)) translateZ(0);
  -webkit-animation: none var(--duration) var(--easing) infinite;
  animation: none var(--duration) var(--easing) infinite;
  -webkit-animation: var(--animation,none) var(--duration) var(--easing) infinite;
  animation: var(--animation,none) var(--duration) var(--easing) infinite
}

.footSideBar .login-button .login-button_wrapper .circle.circle-1,.footSideBar .login-button .login-button_wrapper .circle.circle-9,.footSideBar .login-button .login-button_wrapper .circle.circle-10 {
  --background: var(--c-color-4)
}

.footSideBar .login-button .login-button_wrapper .circle.circle-3,.footSideBar .login-button .login-button_wrapper .circle.circle-4 {
  --background: var(--c-color-2);
  --blur: 14px
}

.footSideBar .login-button .login-button_wrapper .circle.circle-5,.footSideBar .login-button .login-button_wrapper .circle.circle-6 {
  --background: var(--c-color-3);
  --blur: 16px
}

.footSideBar .login-button .login-button_wrapper .circle.circle-2,.footSideBar .login-button .login-button_wrapper .circle.circle-7,.footSideBar .login-button .login-button_wrapper .circle.circle-8,.footSideBar .login-button .login-button_wrapper .circle.circle-11,.footSideBar .login-button .login-button_wrapper .circle.circle-12 {
  --background: var(--c-color-1);
  --blur: 12px
}

.footSideBar .login-button .login-button_wrapper .circle.circle-1 {
  --x: 0;
  --y: -40px;
  --animation: circle-1
}

.footSideBar .login-button .login-button_wrapper .circle.circle-2 {
  --x: 92px;
  --y: 8px;
  --animation: circle-2
}

.footSideBar .login-button .login-button_wrapper .circle.circle-3 {
  --x: -12px;
  --y: -12px;
  --animation: circle-3
}

.footSideBar .login-button .login-button_wrapper .circle.circle-4 {
  --x: 80px;
  --y: -12px;
  --animation: circle-4
}

.footSideBar .login-button .login-button_wrapper .circle.circle-5 {
  --x: 12px;
  --y: -4px;
  --animation: circle-5
}

.footSideBar .login-button .login-button_wrapper .circle.circle-6 {
  --x: 56px;
  --y: 16px;
  --animation: circle-6
}

.footSideBar .login-button .login-button_wrapper .circle.circle-7 {
  --x: 8px;
  --y: 28px;
  --animation: circle-7
}

.footSideBar .login-button .login-button_wrapper .circle.circle-8 {
  --x: 28px;
  --y: -4px;
  --animation: circle-8
}

.footSideBar .login-button .login-button_wrapper .circle.circle-9 {
  --x: 20px;
  --y: -12px;
  --animation: circle-9
}

.footSideBar .login-button .login-button_wrapper .circle.circle-10 {
  --x: 64px;
  --y: 16px;
  --animation: circle-10
}

.footSideBar .login-button .login-button_wrapper .circle.circle-11 {
  --x: 4px;
  --y: 4px;
  --animation: circle-11
}

.footSideBar .login-button .login-button_wrapper .circle.circle-12 {
    --blur: 14px;
    --x: 52px;
  --y: 4px;
  --animation: circle-12
}

@-webkit-keyframes circle-1 {
  33% {
    -webkit-transform: translateY(16px) translateZ(0);
    transform: translateY(16px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(12px,64px) translateZ(0);
    transform: translate(12px,64px) translateZ(0)
  }
}

@keyframes circle-1 {
  33% {
    -webkit-transform: translateY(16px) translateZ(0);
    transform: translateY(16px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(12px,64px) translateZ(0);
    transform: translate(12px,64px) translateZ(0)
  }
}

@-webkit-keyframes circle-2 {
  33% {
    -webkit-transform: translate(80px,-10px) translateZ(0);
    transform: translate(80px,-10px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(72px,-48px) translateZ(0);
    transform: translate(72px,-48px) translateZ(0)
  }
}

@keyframes circle-2 {
  33% {
    -webkit-transform: translate(80px,-10px) translateZ(0);
    transform: translate(80px,-10px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(72px,-48px) translateZ(0);
    transform: translate(72px,-48px) translateZ(0)
  }
}

@-webkit-keyframes circle-3 {
  33% {
    -webkit-transform: translate(20px,12px) translateZ(0);
    transform: translate(20px,12px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(12px,4px) translateZ(0);
    transform: translate(12px,4px) translateZ(0)
  }
}

@keyframes circle-3 {
  33% {
    -webkit-transform: translate(20px,12px) translateZ(0);
    transform: translate(20px,12px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(12px,4px) translateZ(0);
    transform: translate(12px,4px) translateZ(0)
  }
}

@-webkit-keyframes circle-4 {
  33% {
    -webkit-transform: translate(76px,-12px) translateZ(0);
    transform: translate(76px,-12px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(112px,-8px) translateZ(0);
    transform: translate(112px,-8px) translateZ(0)
  }
}

@keyframes circle-4 {
  33% {
    -webkit-transform: translate(76px,-12px) translateZ(0);
    transform: translate(76px,-12px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(112px,-8px) translateZ(0);
    transform: translate(112px,-8px) translateZ(0)
  }
}

@-webkit-keyframes circle-5 {
  33% {
    -webkit-transform: translate(84px,28px) translateZ(0);
    transform: translate(84px,28px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(40px,-32px) translateZ(0);
    transform: translate(40px,-32px) translateZ(0)
  }
}

@keyframes circle-5 {
  33% {
    -webkit-transform: translate(84px,28px) translateZ(0);
    transform: translate(84px,28px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(40px,-32px) translateZ(0);
    transform: translate(40px,-32px) translateZ(0)
  }
}

@-webkit-keyframes circle-6 {
  33% {
    -webkit-transform: translate(28px,-16px) translateZ(0);
    transform: translate(28px,-16px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(76px,-56px) translateZ(0);
    transform: translate(76px,-56px) translateZ(0)
  }
}

@keyframes circle-6 {
  33% {
    -webkit-transform: translate(28px,-16px) translateZ(0);
    transform: translate(28px,-16px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(76px,-56px) translateZ(0);
    transform: translate(76px,-56px) translateZ(0)
  }
}

@-webkit-keyframes circle-7 {
  33% {
    -webkit-transform: translate(8px,28px) translateZ(0);
    transform: translate(8px,28px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(20px,-60px) translateZ(0);
    transform: translate(20px,-60px) translateZ(0)
  }
}

@keyframes circle-7 {
  33% {
    -webkit-transform: translate(8px,28px) translateZ(0);
    transform: translate(8px,28px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(20px,-60px) translateZ(0);
    transform: translate(20px,-60px) translateZ(0)
  }
}

@-webkit-keyframes circle-8 {
  33% {
    -webkit-transform: translate(32px,-4px) translateZ(0);
    transform: translate(32px,-4px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(56px,-20px) translateZ(0);
    transform: translate(56px,-20px) translateZ(0)
  }
}

@keyframes circle-8 {
  33% {
    -webkit-transform: translate(32px,-4px) translateZ(0);
    transform: translate(32px,-4px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(56px,-20px) translateZ(0);
    transform: translate(56px,-20px) translateZ(0)
  }
}

@-webkit-keyframes circle-9 {
  33% {
    -webkit-transform: translate(20px,-12px) translateZ(0);
    transform: translate(20px,-12px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(80px,-8px) translateZ(0);
    transform: translate(80px,-8px) translateZ(0)
  }
}

@keyframes circle-9 {
  33% {
    -webkit-transform: translate(20px,-12px) translateZ(0);
    transform: translate(20px,-12px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(80px,-8px) translateZ(0);
    transform: translate(80px,-8px) translateZ(0)
  }
}

@-webkit-keyframes circle-10 {
  33% {
    -webkit-transform: translate(68px,20px) translateZ(0);
    transform: translate(68px,20px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(100px,28px) translateZ(0);
    transform: translate(100px,28px) translateZ(0)
  }
}

@keyframes circle-10 {
  33% {
    -webkit-transform: translate(68px,20px) translateZ(0);
    transform: translate(68px,20px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(100px,28px) translateZ(0);
    transform: translate(100px,28px) translateZ(0)
  }
}

@-webkit-keyframes circle-11 {
  33% {
    -webkit-transform: translate(4px,4px) translateZ(0);
    transform: translate(4px,4px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(68px,20px) translateZ(0);
    transform: translate(68px,20px) translateZ(0)
  }
}

@keyframes circle-11 {
  33% {
    -webkit-transform: translate(4px,4px) translateZ(0);
    transform: translate(4px,4px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(68px,20px) translateZ(0);
    transform: translate(68px,20px) translateZ(0)
  }
}

@-webkit-keyframes circle-12 {
  33% {
    -webkit-transform: translate(56px) translateZ(0);
    transform: translate(56px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(60px,-32px) translateZ(0);
    transform: translate(60px,-32px) translateZ(0)
  }
}

@keyframes circle-12 {
  33% {
    -webkit-transform: translate(56px) translateZ(0);
    transform: translate(56px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(60px,-32px) translateZ(0);
    transform: translate(60px,-32px) translateZ(0)
  }
}

.footNoSideBar {
  left: 0;
  right: 0;
  -webkit-transform: none;
  transform: none;
  margin: 0 auto
}
@media screen and (max-width: 1221px) { .wapnone{display:none; }
}
    [/hidecontent]

    推荐阅读

    给力项目：创业猫会员可免费下载 加入会员
    友情提醒： 请尽量登录购买，防止付款了不发货！
    QQ交流群：226333560 站长微信：qgzmt2
    版权声明 1 本网站名称：创业猫
    2 本站永久网址：https://www.cymao.cc/
    3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ2332379进行删除处理。
    4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
    5 互联网转载资源会有一些其他联系方式，请大家不要盲目相信，被骗本站概不负责！
    6 本网站部分内容只做项目揭秘，无法一对一教学指导，每篇文章内都含项目全套的教程讲解，请仔细阅读。
    7 本站分享的所有平台仅供展示，本站不对平台真实性负责，站长建议大家自己根据项目关键词自己选择平台。
    8 因文章发布时间和您阅读文章时间存在时间差，有些项目红利期可能已经过了，能不能赚钱需要自己判断，本网站仅做资源分享，不做任何收益保障。
    9 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

    给TA打赏
    共{{data.count}}人
    人已打赏
    子比主题子比主题美化子比主题首页底部导航登入美化子比美化
    网站美化

    子比主题美化-子比小工具合集插件

    2024-11-29 23:33:36

    未分类网站美化

    子比主题美化 – 评论区添加随机夸夸功能

    2024-11-30 0:08:03

    0 条回复 A文章作者 M管理员
      暂无讨论，说说你的看法吧
    ❯

    解锁会员权限

    开通会员

    解锁海量优质VIP资源

    立刻开通
    个人中心
    购物车
    优惠劵
    今日签到
    有新私信 私信列表
    搜索

    • 扫码打开当前页

    • 站长微信

    返回顶部