【博客园美化】博客园简单动态背景美化(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;
  }
}
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/230562.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

js写旋转的时钟动态

目录 1、css代码 2.html代码 3.js代码 1、css代码 .box {position: relative;width: 600px;height: 600px;background: url(./images/clock.jpg) no-repeat center;}.hour,.minute,.second {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}.hour {background…

24、pytest通过xfail将测试函数标记为预期失败

官方实例 # content of test_xfail.py import pytest import syspytest.mark.xfail def test_function():print("test_function was invoked.")def valid_config():return Falsedef test_function_02():if not valid_config():pytest.xfail("failing configura…

素材创作平台,解决企业素材供给问题

企业对于高质量素材的需求日益增长。无论是为了提升品牌形象,还是为了推动产品销售,都需要大量的专业设计素材。然而,素材的获取、设计和定制往往是一项耗时耗力的工作。这时,美摄科技素材创作平台应运而生,为企业提供…

387.字符串中的第一个唯一字符 —> `size()`

解答&#xff1a; int firstUniqChar(string s) {int size s.size();// char count[26] { 0 };// error.1int count[26] { 0 };// for (int i 0; i < s.size() - 1; i) // error.2for (int i 0; i < size; i){count[s[i] - a] 1;}for (int i 0; i < size; i){…

J.408之数据结构

J-408之数据结构_北京信息科技大学第十五届程序设计竞赛&#xff08;同步赛&#xff09; (nowcoder.com) 思维好题&#xff0c;直接用两个set存没出现的数字就好了 // Problem: 408之数据结构 // Contest: NowCoder // URL: https://ac.nowcoder.com/acm/contest/68572/J // Me…

运筹说 第105期 | 算法介绍之非线性规划

本期我们进行运筹学之非线性规划算法的讲解&#xff0c;我们将对非线性规划的基础知识进行一个简单的回顾&#xff0c;并介绍求解无约束极值问题和约束极值问题的MATLAB和Python相关代码&#xff0c;以帮助大家利用工具快速求解无约束极值问题和约束极值问题&#xff0c;做到事…

BGP综合

1、使用PreVal策略&#xff0c;确保R4通过R2到达192.168.10.0/24。 2、使用AS_Path策略&#xff0c;确保R4迪过R3到达192.168.11.0/24。 3、配置MED策略&#xff0c;确保R4通过R3到达192.168.12.0/24。 4、使用Local Preference策略&#xff0c;确保R1通过R2到达192.168.1.0…

Nacos注册中心客户端容灾

目前Nacos客户端有一个FailoverReactor来进行容灾文件的管理&#xff0c;可以通过在指定磁盘文件里写入容灾数据来进行客户端使用数据的覆盖。FailoverReactor目前会拦截Nacos客户端查询接口调用&#xff0c;以getAllInstances接口为例&#xff0c;目前FailoverReactor的工作流…

【Linux】浅谈信号量

文章目录 一、共享内存的弊端新概念引入 二、理解信号量原子性 tips&#xff1a;system V 是一套标准&#xff0c;共享内存&#xff0c;信号量&#xff0c;消息队列属于system V。 一、共享内存的弊端 进程A和进程B进行通信时&#xff0c;假如进程A向物理内存的共享区写入&quo…

深入浅出:HTTPS单向与双向认证及证书解析20231208

介绍: 网络安全的核心之一是了解和实施HTTPS认证。本文将探讨HTTPS单向认证和双向认证的区别&#xff0c;以及SSL证书和CA证书在这些过程中的作用&#xff0c;并通过Nginx配置实例具体说明。 第一部分&#xff1a;HTTPS单向认证 定义及工作原理&#xff1a;HTTPS单向认证是一…

前端:HTML+CSS+JavaScript实现轮播图2

前端&#xff1a;HTMLCSSJavaScript实现轮播图2 1. 和之前版本的区别2. 实现原理3. 针对上述的改进3. 参考代码 1. 和之前版本的区别 之前发布的那篇关于轮播图的文章在这&#xff1a;前端&#xff1a;HTMLCSSJavaScript实现轮播图&#xff0c;只能说存在问题吧&#xff01;比…

Redis KEY*模糊查询导致速度慢、阻塞其他 Redis 操作

Redis KEY*模糊查询导致交互速度慢、阻塞其他 Redis 操作 查询速度慢的原因 在Redis中&#xff0c;使用通配符 KEYS 命令进行键的模糊匹配&#xff08;比如 KEYS key*&#xff09;可能会导致性能问题&#xff0c;尤其是在数据集较大时。这是因为 KEYS 命令的实现需要遍历所有…

输入/输出控制详解(块、字符设备?程序控制?中断、DMA又是啥?)

输入/输出&#xff08;I/O&#xff09; 输入/输出&#xff08;I/O&#xff09;控制是计算机系统中的一个关键概念&#xff0c;涉及到计算机与外部设备之间的数据传输。计算机系统通过输入设备接收用户输入&#xff0c;通过输出设备向用户显示结果。输入/输出控制包括管理和协调…

1.查看表的基本结构,表的详细结构和修改表名

查看表的基本结构,表的详细结构和修改表名 1.查看数据表基本结构 有强迫症或健忘症的小伙伴们在建好数据库和表以后&#xff0c;通常会怀疑自己刚才是不是敲错了&#xff0c;怎么办&#xff1f;如果不是使用图形界面是不是就没法查看啦&#xff1f; 不存在的&#xff0c;这就…

PDF控件Spire.PDF for .NET【转换】演示:将 SVG 转换为 PDF

SVG 是一种矢量图形文件格式&#xff0c;用于创建可缩放且不损失质量的图像。然而&#xff0c;PDF由于支持高质量打印、加密、数字签名等功能&#xff0c;更适合共享和打印。将SVG转换为PDF可以保证图像在不同设备和环境下都有良好的显示效果&#xff0c;并更好地保护知识产权。…

【数据结构 — 排序 — 插入排序】

数据结构 — 排序 — 插入排序 一.排序1.1.排序的概念及其运用1.1.1排序的概念1.1.2排序运用1.1.3 常见的排序算法 二.插入排序2.1.直接插入排序2.1.1.算法讲解2.1.2.代码实现2.1.2.1.函数定义2.1.2.2.算法接口实现2.1.2.3.测试代码实现2.1.2.4.测试展示 2.2.希尔排序2.2.1.算法…

苹果IOS在Safari浏览器中将网页添加到主屏幕做伪Web App,自定义图标,启动动画,自定义名称,全屏应用pwa

在ios中我们可以使用Safari浏览自带的将网页添加到主屏幕上&#xff0c;让我们的web页面看起来像一个本地应用程序一样&#xff0c;通过桌面APP图标一打开&#xff0c;直接全屏展示&#xff0c;就像在APP中效果一样&#xff0c;完全体会不到你是在浏览器中。 1.网站添加样式 在…

Leetcode2477. 到达首都的最少油耗

Every day a Leetcode 题目来源&#xff1a;2477. 到达首都的最少油耗 解法1&#xff1a;贪心 深度优先搜索 题目等价于给出了一棵以节点 0 为根结点的树&#xff0c;并且初始树上的每一个节点上都有一个人&#xff0c;现在所有人都需要通过「车子」向结点 0 移动。 对于…

基于ResNet模型的908种超大规模中草药图像识别系统

中草药药材图像识别相关的实践在前文中已有对应的实践了&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 《python基于轻量级GhostNet模型开发构建23种常见中草药图像识别系统》 《基于轻量级MnasNet模型开发构建40种常见中草药图像识别系统》 在上一篇文章中&…

操作系统 2-6 课后作业2.3:系统调用

第1关版本1内核执行的完整系统调用序列 任务描述 分析版本1内核&#xff0c;回答下列问题&#xff1a; 从系统开机直到输出第 4 个字符‘1’&#xff0c;系统依次执行了哪些系统调用&#xff1f;分别是在几号进程中执行的&#xff1f;&#xff08;对于一组连续出现的 0 号进程…