子比主题美化 – 顶部多功能组件添加适配日夜模式波浪

AI 文章摘要
本文介绍了为子比主题顶部多功能组件添加适配日夜模式的白色波浪背景教程。核心要点如下: 1. **功能特性**:波浪动画支持自动适配白天与黑夜模式,背景色随主题切换。 2. **版本选择**:提供两种 CSS 代码方案,用户可根据需求选择“移动端显示”或“移动端隐藏”波浪效果(通过媒体查询控制)。 3. **实施步骤**: - 将对应的 CSS 代码粘贴至自定义 CSS 中。 - 下载并上传附件中的 JS 文件至网站目录。 - 在自定义底部 HTML 中引入该 JS 文件,并修改正确的文件路径。

前言

大家好,有用户说想要顶部多功能组件背景底部添加白色波浪教程。波浪已适配日夜模式。因为这个教程原创是狐狸库,所以就没发。今天给大家发一下

效果图

image

教程开始

狐狸库发的是PC端和移动端都显示波浪。我个人感觉移动端显示这个背景不太美观。博客使用的是移动端不显示波浪的。给大家把两个版本的css都发出来

移动端显示波浪

将下面css代码放入自定义css中

移动端不显示波浪

将下面css代码放入自定义css中

将文章附件的js放入网站目录中。路径记好在自定义代码中的自定义底部HTML中添加下面代码。路径自己修改

© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容