给你的博客添加动态背景!?
Welcome to - 小枫的Blog

给你的博客添加动态背景!?

小枫_QWQ
9月15日发布 /正在检测是否收录...

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

      哈?清空浏览器缓存试试

易航博客