子比主题右侧悬浮按钮栏美化

先看效果

wwtwj-ynu16.gif

 

 

今天有位童鞋看上我这个悬浮按钮的美化,我就抽空来写一篇教程了。这个其实也很简单,主要就是背景色,圆角度,再加一个伪元素,也就这三样东西。下面来看看怎么实现吧。

 

PS:(本来我想写详细的注释,注明代码效果,但我想了想,感觉想学CSS的童鞋应该占少数,我就不写具体的代码效果了。你们复制到子比主题后台->自定义CSS样式 里面就行了。)

 

使用方法

将以下代码复制到主题设置-全局功能-自定义代码:自定义CSS代码中,保存即可

注意: 记得修改这里,background: url(这里改成你自己喜欢的图片链接,可以是GIF);

 

span.float-btn.more-btn.hover-show.nowave {
margin-top: 0px
}
.float-right.round.position-bottom {
background: #fff;
border-radius: var(–main-radius);
transition: 0s;
right: 1px;
bottom: 170px;
border-radius: 20px 0 0 20px;
box-shadow: -5px 3px 10px 0px rgb(5 5 5 / 15%)
}
.float-right.round .float-btn {
border-radius: 8px 0px 0px 17px
}
.float-right .float-btn {
background: #fff
}
.float-right.round.position-bottom::before {
THE END
喜欢就支持一下吧
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称