【博客园美化】博客园简单动态背景美化(css个人现写的,不喜勿喷)

效果如图(背景是动态的)

效果参见:浅吟清风 的博客园

1、前置操作

1、有一个博客园账号;

2、 登陆博客园,进入设置;

3、 选择"博客设置"-> "博客侧边栏公告"-> 申请JS权限(图片展示的是申请通过后的样子)



2、开始简单的设置

1、 选择博客皮肤"Custom"(其他的应该也可以,只是代码可能要改)

2、代码风格设置,这部分随意,我贴下我的

3、最后一步(最重要):粘贴代码(此处只改了css样式,所以只粘贴了CSS代码,js和html也同理)

4、点击最下方的"保存",刷新首页后就会生效

附 完整CSS代码

复制代码
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');

:root {
  font-size: 15px;
}

  body {
  font-family: 'Quicksand', sans-serif;
  margin: 0;
  min-height: 100vh;
  background-color: #e493d0;
  background-image:        
    radial-gradient(closest-side, rgba(249, 171, 155, 0.845), rgba(235, 105, 78, 0)),
    radial-gradient(closest-side, rgb(154, 236, 249), rgba(243, 11, 164, 0)),
    radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)),
    radial-gradient(closest-side, rgb(223, 255, 200), rgba(170, 142, 245, 0)),
    radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0));
  background-size: 
    130vmax 130vmax,
    80vmax 80vmax,
    90vmax 90vmax,
    110vmax 110vmax,
    90vmax 90vmax;
  background-position:
    -80vmax -80vmax,
    60vmax -30vmax,
    10vmax 10vmax,
    -30vmax -10vmax,
    50vmax 50vmax;
  background-repeat: repeat;
  animation: 10s movement linear infinite;
}

  div#navigator {
    background: rgba(217, 217, 217, 0.024);
  }

  div.blogStats {
    color: rgb(6, 3, 0) !important;
  }

  a {
    color: rgb(6, 3, 0) !important;
  }

  td.CalTodayDay {
    /* color: rgb(96, 207, 190) !important; */
    font-size: 17px !important;
    font-weight: 100 !important;
  }
  

@keyframes movement {
  0%, 100% {
    background-size: 
      130vmax 130vmax,
      80vmax 80vmax,
      90vmax 90vmax,
      110vmax 110vmax,
      90vmax 90vmax;
    background-position:
      -80vmax -80vmax,
      60vmax -30vmax,
      10vmax 10vmax,
      -30vmax -10vmax,
      50vmax 50vmax;
  }
  25% {
    background-size: 
      100vmax 100vmax,
      90vmax 90vmax,
      100vmax 100vmax,
      90vmax 90vmax,
      60vmax 60vmax;
    background-position:
      -60vmax -90vmax,
      50vmax -40vmax,
      0vmax -20vmax,
      -40vmax -20vmax,
      40vmax 60vmax;
  }
  50% {
    background-size: 
      80vmax 80vmax,
      110vmax 110vmax,
      80vmax 80vmax,
      60vmax 60vmax,
      80vmax 80vmax;
    background-position:
      -50vmax -70vmax,
      40vmax -30vmax,
      10vmax 0vmax,
      20vmax 10vmax,
      30vmax 70vmax;
  }
  75% {
    background-size: 
      90vmax 90vmax,
      90vmax 90vmax,
      100vmax 100vmax,
      90vmax 90vmax,
      70vmax 70vmax;
    background-position:
      -50vmax -40vmax,
      50vmax -30vmax,
      20vmax 0vmax,
      -10vmax 10vmax,
      40vmax 60vmax;
  }
}
相关推荐
大布布将军5 分钟前
⚡️ 性能加速器:利用 Redis 实现接口高性能缓存
前端·数据库·经验分享·redis·程序人生·缓存·node.js
Change!!8 分钟前
uniapp写的h5,怎么根据页面详情,设置不同的标题
前端·uni-app·标题
浅箬8 分钟前
uniapp 打包之后出现shadow-grey.png去除
前端·uni-app
梵得儿SHI12 分钟前
(第五篇)Spring AI 核心技术攻坚:流式响应与前端集成实现【打字机】效果
前端·webflux·springai·流式响应技术·低延迟ai交互·reactive编程原理·streamapi设计
鹏多多14 分钟前
一文搞懂柯里化:函数式编程技巧的解析和实践案例
前端·javascript·vue.js
前端码农一枚22 分钟前
前端打包性能优化全攻略
前端
Roc.Chang23 分钟前
终极指南:解决 Vue 项目中 “regenerator-runtime/runtime“ 缺失报错
前端·javascript·vue.js·webpack·前端工程
AAA阿giao24 分钟前
从树到楼梯:数据结构与算法的奇妙旅程
前端·javascript·数据结构·学习·算法·力扣·
BD_Marathon28 分钟前
Vue3组件(SFC)拼接页面
前端·javascript·vue.js
wregjru29 分钟前
【C++】2.3 二叉搜索树的实现(附代码)
开发语言·前端·javascript