子比主题美化 – 悬浮侧栏兔子挂件区块美化-繁星博客

文章最后更新时间：2024-12-29 21:03:23

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

效果如下

子比主题美化 – 悬浮侧栏兔子挂件区块美化-繁星博客

上面是我自己给大家做的演示，还是那句话我发文章之前，我要保证他可以用我才可以发出来，我看很多站都是直接搬什么的，不能用什么的，真的有点。。话不多说直接上代码

部署说明

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

代码与详细教程

HTML

本文付费阅读内容 – 月度会员免费

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.nuoso.cn/img/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.nuoso.cn/img/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.nuoso.cn/img/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.nuoso.cn/img/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-右边

本文付费阅读内容 – 月度会员免费

/*右边*/
.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.nuoso.cn/img/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.nuoso.cn/img/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.nuoso.cn/img/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.nuoso.cn/img/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;
}