子比主题美化 – 页面左下角添加欢迎光临提示框

简介

在网站页面左下角添加一个带有铃铛图标的“欢迎光临”胶囊提示框，提升用户体验与站点亲和力。

功能特点：

位置固定：页面左下角悬浮显示
铃铛图标：自带摆动动画效果
一键关闭：点击右上角X可关闭，带平滑移除动画
深色模式自适应：自动适配子比主题深/浅色模式
移动端隐藏：手机访问自动不显示

效果图

教程开始

这个代码可以分开放入保存也可以在一起合并保存，自己选择一种添加即可

分开添加

将下面代码放入css代码

此处内容已隐藏，请评论后刷新页面查看.

将下面代码放入自定义JavaScript代码

此处内容已隐藏，请评论后刷新页面查看.

将下面代码放入自定义底部HTML

此处内容已隐藏，请评论后刷新页面查看.

其中svg标签可以自行替换其他图标，可以去阿里巴巴矢量图标库中寻找图标。可以添加svg图标也可以下载后img标签引入svg文件。也可以直接采用图标库，例如fa图标库。或者图片也是可以的

温馨提示： 本文最后更新于2026-02-12 13:21:53，某些文章具有时效性，若有错误或已失效，请在下方留言或联系星空知。

版权声明 1 本网站名称：星空知
2 本站永久网址：https://www.xkzhi.cn/
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ1397403557进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END