给你的网页添加动态背景😎
给你的网页添加动态背景😎
Welcome to - 小枫的Blog

给你的网页添加动态背景😎

小枫_QWQ
1年前发布 /正在检测是否收录...

本文介绍了如何更新Joe主题的CSS文件以实现特定效果,包括修改背景颜色、添加动画和自定义CSS设置。首先,找到并打开Joe主题的CSS文件,然后根据需要修改`html`部分的样式。接下来,更新`html[data-night='night'] body`部分的样式,并保存文件。最后,添加自定义CSS代码,如渐变动画和字体设置,并保存设置。完成这些步骤后,即可享受定制的主题体验。


Joe主题教程(仅适用于Joe主题,其他主题请根据实际情况调整)

0.0.1 准备工作

找到并打开站点目录中的 /usr/themes/Joe/assets/css/joe.mode.css 文件。

1.0.0 修改源码

更新 html {} 样式

  1. --background: #fff; 修改为 --background: rgba(255, 255, 255, 0.8);
  2. 添加以下代码:

    /* 背景动效实现逻辑 */
    --gradation: linear-gradient(270deg, #a8e6cf, #dcedc1, #ffd3b6, #ffaaa5, #ff8b94);

更新 html[data-night='night'] body {} 样式

  1. 添加:

    --gradation: #323335;

1.1.0 完成初步修改

保存并关闭文件。

2.0.0 自定义CSS设置

  1. 打开主题设置。
  2. 找到插入代码的选项。
  3. 添加以下自定义CSS:

    @keyframes GradientAnimation {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    
     body {
         font-family: 'Arial', sans-serif;
         background: var(--gradation);
         background-size: 1000% 1000%;
         animation: GradientAnimation 15s ease infinite;
     }
  4. 保存设置,200 OK。

3.0.0 完成

一切设置完毕! ::(酷)


© 版权声明
THE END
喜欢就支持一下吧
点赞 3 分享 收藏
评论 共5条
取消 登录评论
  1. 头像
    As
    Android · Google Chrome

    大佬,按照你的教程修改了,页面没有变化,哪里错了嘛?求帮助。

    1. 头像
      小枫_QWQ 作者
      Windows 10 · Google Chrome
      @ As

      是不是有别的样式覆盖了

      1. 头像
        As
        Android · Google Chrome
        @ 小枫_QWQ

        清空缓存试了也没用,别的样式也没添加过呀,就加了一个冒泡泡的特效,我看现在你的网站,把动态背景去掉了吗?

        1. 头像
          小枫_QWQ 作者
          Android · Google Chrome
          @ As

          我现在把背景换成静态的了,啧奇怪啊,我跟着我流程试试

    2. 头像
      小枫_QWQ 作者
      Android · Google Chrome
      @ As

      哈?清空浏览器缓存试试

易航博客