子比美化 侧边悬浮兔子挂件美化

01788
信息

美化介绍

个人网站，动漫二次元的应该很适合这个美化，也适合用在一些布局紧凑的网站上，用于在屏幕的两侧展示一个可爱的兔子，鼠标移动到兔子上面就能弹出提示框，方便用户的引导与行为控制，非常实用的一个美化，我认为这个确实不错，左右都可以加。

美化演示

子比主题美化 侧边悬浮兔子挂件美化

使用说明

首先第一步，要知道一共有三样东西，第一个就是HTML代码，第二步就是两个CSS代码，为什么是两个CSS，其实使用一个就可以，因为两个CSS代码是用来控制放左边还是放右边，最后一样就是图片。

HTML代码代码

<link href="css目录地址" rel="external nofollow"  rel="external nofollow"  rel="stylesheet" type="text/css">
 <div class="act-rule">
    <p class="title">
        招募设计师
    </p>
    <div class="rule-wrap">
      <dl class="wrap-content">
        <dt>规则</dt>
        <dd><i>1</i>使您的作品被广泛展现，每次下载都有收入，最专业的设计稿交易平台，平台只抽取15%费用。
        </dd>
        <dd><i>2</i>测试兔子，右侧测试兔子
        </dd>
        <dd><i>3</i>入驻即赠送免费设计师专属极速网盘，无广告无限速
        </dd>
      </dl>
      <p class="wrap-btn">
        <a href="/" rel="external nofollow"  rel="external nofollow" >查看详情</a>
      </p>
    </div>
  </div>

将上面的代码放到/wp-content/themes/zibll/index.php文件里面<?php get_sidebar(); ?>下方就可以

要记得 css 目录地址就是你新建一个css文件，然后把目录复制过来放里面。

CSS左边

以下代码就是CSS，就是刚才HTML代码下面说的你建一个css文件，但是记住这个是左侧显示的css代码。

.act-rule {
      position: fixed;
      left: 3px;
      top: 20%;
      margin-top: -50px;
      width: 42px;
      height: 120px;
      border: 1px solid #10c55b;
      border-radius: 3px;
      box-sizing: border-box;
      cursor: pointer;
      padding: 12px 11px;
      z-index: 1200;
      background-color: #fff;
    }

    .act-rule:hover .rule-wrap,
    .act-rule.active .rule-wrap {
      transform: scale(1) translate(0, 0);
      visibility: visible;
      top: 184px;
      left: 20em;
    }

    .act-rule>p {
      color: #10c55b;
      font-size: 18px;
      text-align: center;
      word-spacing: 1px;
      line-height: 1.1;
    }

    .act-rule:after {
      content: " ";
      width: 52px;
      height: 44px;
      position: absolute;
      top: -45px;
      left: -7px;
      background: url("https://www.tfbkw.com/pic/tuzi/cartoon-rabbit-s.png") no-repeat;
    }

    .rule-wrap {
      transition: all 0.6s ease;
      transform: scale(0.2);
      width: 460px;
      position: absolute;
      box-sizing: border-box;
      padding: 0 40px;
      top: -250px;
      left: -20em;
      visibility: hidden;
      background: url("https://www.tfbkw.com/pic/tuzi/fuchuang_center.png") repeat-y;
    }

    .rule-wrap:before {
      position: absolute;
      content: " ";
      top: -233px;
      left: 0;
      width: 460px;
      height: 233px;
      z-index: 1;
      background: url("https://www.tfbkw.com/pic/tuzi/fuchuang_head.png") no-repeat;
    }

    .rule-wrap:after {
      position: absolute;
      content: " ";
      bottom: -20px;
      left: 0;
      width: 460px;
      height: 20px;
      z-index: 1;
      background: url("https://www.tfbkw.com/pic/tuzi/fuchuang_footer.png") no-repeat;
    }

    .rule-wrap .wrap-content {
      padding: 0 18px;
    }

    .rule-wrap dd {
      width: 310px;
      font-size: 14px;
      color: #333;
      line-height: 1.71;
      position: relative;
      padding-left: 34px;
      margin-top: 20px;
      margin-left: 0em;
    }

    .rule-wrap dd i {
      position: absolute;
      text-align: center;
      line-height: 20px;
      width: 24px;
      top: 5px;
      left: 0;
      font-size: 14px;
      color: #ffffff;
      height: 20px;
      border-radius: 9.5px;
      background-color: #999999;
    }

    .rule-wrap .wrap-btn {
      padding: 20px 0;
      text-align: center;
    }

    .rule-wrap .wrap-btn a {
      text-align: center;
      display: inline-block;
      width: 100px;
      height: 40px;
      border-radius: 4px;
      background-color: #fff;
      border: solid 1px #10c55b;
      transition: all 0.2s;
      color: #10c55b;
      font-size: 16px;
      line-height: 40px;
    }

    .rule-wrap .wrap-btn a:hover {
      background-color: #10c55b;
      color: #fff;
    }

    .rule-wrap .wrap-content dt {
      border-left: 6px solid #10c55b;
      font-size: 22px;
      color: #10c55b;
      font-weight: 700;
      padding-left: 10px;
    }

CSS右边

以下代码就是CSS，就是刚才HTML代码下面说的你建一个css文件，但是记住这个是右侧显示的css代码。

.act-rule {
  position: fixed;
  right: 3px;
  top: 20%;
  margin-top: -50px;
  width: 42px;
  height: 120px;
  border: 1px solid #10c55b;
  border-radius: 3px;
  box-sizing: border-box;
  cursor: pointer;
  padding: 12px 11px;
  z-index: 1200;
  background-color: #fff;
}
.act-rule:hover .rule-wrap,
.act-rule.active .rule-wrap {
  transform: scale(1) translate(0, 0);
  visibility: visible;
  top: 184px;
  left: -420px;
}
.act-rule > p {
  color: #10c55b;
  font-size: 18px;
  text-align: center;
  word-spacing: 1px;
  line-height: 1.1;
}
.act-rule:after {
  content: " ";
  width: 52px;
  height: 44px;
  position: absolute;
  top: -45px;
  left: -7px;
  background: url("https://www.tfbkw.com/pic/tuzi/cartoon-rabbit-s.png") no-repeat;
}
.rule-wrap {
  transition: all 0.6s ease;
  transform: scale(0.2);
  width: 460px;
  position: absolute;
  box-sizing: border-box;
  padding: 0 40px;
  top: -250px;
  left: 0px;
  visibility: hidden;
  background: url("https://www.tfbkw.com/pic/tuzi/fuchuang_center.png") repeat-y;
}
.rule-wrap:before {
  position: absolute;
  content: " ";
  top: -233px;
  left: 0;
  width: 460px;
  height: 233px;
  z-index: 1;
  background: url("https://www.tfbkw.com/pic/tuzi/fuchuang_head.png") no-repeat;
}
.rule-wrap:after {
  position: absolute;
  content: " ";
  bottom: -20px;
  left: 0;
  width: 460px;
  height: 20px;
  z-index: 1;
  background: url("https://www.tfbkw.com/pic/tuzi/fuchuang_footer.png") no-repeat;
}
.rule-wrap .wrap-content {
  padding: 0 18px;
}
.rule-wrap dd {
  width: 310px;
  font-size: 14px;
  color: #333;
  line-height: 1.71;
  position: relative;
  padding-left: 34px;
  margin-top: 20px;
  margin-left: 0em;
}
.rule-wrap dd i {
  position: absolute;
  text-align: center;
  line-height: 20px;
  width: 24px;
  top: 5px;
  left: 0;
  font-size: 14px;
  color: #ffffff;
  height: 20px;
  border-radius: 9.5px;
  background-color: #999999;
}
.rule-wrap .wrap-btn {
  padding: 20px 0;
  text-align: center;
}
.rule-wrap .wrap-btn a {
  text-align: center;
  display: inline-block;
  width: 100px;
  height: 40px;
  border-radius: 4px;
  background-color: #fff;
  border: solid 1px #10c55b;
  transition: all 0.2s;
  color: #10c55b;
  font-size: 16px;
  line-height: 40px;
}
.rule-wrap .wrap-btn a:hover {
  background-color: #10c55b;
  color: #fff;
}
.rule-wrap .wrap-content dt {
  border-left: 6px solid #10c55b;
  font-size: 22px;
  color: #10c55b;
  font-weight: 700;
  padding-left: 10px;
}

兔子素材

兔子素材请自行更换，避免代码中的图片地址失效。

  此处内容已隐藏，请评论后刷新页面查看.
有问题及时联系站长，QQ：1240555208
更多优质资源在QQ群里，可以进群领取：467392290~
© 版权声明

本站资源大多来自网络，如有侵犯你的权益请联系管理员 E-mail： 1240555208@qq.com 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用，未经原版权作者许可,禁止用于任何商业途径！请在下载24小时内删除！

如果遇到 付费 才可 观看 的文章，建议升级 终身VIP。 全站所有资源 “任意下免费看”。 本站资源少部分采用 7z压缩， 为防止有人压缩软件不支持7z格式 ，7z 解压，建议下载 7-zip ，zip、rar 解压，建议下载 WinRAR 。

THE END
子比美化源码子比美化
# 网盘# 广告# 专业# 个人# 测试# gif# 作品# 无广告# 子比# 规则# 素材# 动漫# 东西# 子比主题美化# 设计师# 可爱# 收入
点赞8 分享
及时反馈~ 抢沙发

请登录后发表评论

    暂无评论内容

用户封面
大海的头像-大海资源库
网站倒计时

2025年 – 新年倒计时
天 时 分 秒

  • 2350篇 文章数目
  • 3606位 注册用户
  • 763天 运行天数
  • 5259条 评论数目
  • 1400445次 总访问量