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

news2024/10/6 6:04:51

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

效果参见: 浅吟清风 的博客园
在这里插入图片描述

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;
  }
}
    

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

6.19二叉搜索树中的众数

算法: 提到二叉搜索树,一定是中序遍历! 双指针法: pre指向当前节点cur的前一个节点,如果cur.val pre.val,count,count用来统计该数值出现的频率 如果 频率count 等于 maxCount(最…

交付《啤酒游戏经营决策沙盘》的项目

感谢首富客户连续两年的邀请,交付《啤酒游戏经营决策沙盘》的项目,下周一JSTO首席学习官Luna想让我分享下系统思考与投资理财,想到曾经看过的一本书《深度思维》,看到一些结构来预判未来。不仅仅可以应用在企业经营和组织发展上&a…

tomcat篇---第三篇

系列文章目录 文章目录 系列文章目录前言一、Tomcat是什么?二、什么是Servlet呢?三、什么是Servlet规范?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 一、To…

【Fastadmin】利用 build_select 做一个树状下拉选择框

1.效果展示 系统crud生成的下拉分类有些不是很好看,并且选择困难,看不出级差,效果如下: 经过 build_select 加工后的效果,美观好看,并添加上搜索功能: 2. 首先需要写一个树状图的数据格式 protected $datalist []; pu…

科学指南针走进江南大学,探索科研绘图与3D Max软件应用的精彩世界

2023年11月23日,江南大学迎来了一场精彩的科学指南针线下讲座,该讲座以探索科研绘图与3D Max软件应用为主题,通过专家讲座和实践操作,帮助学生了解科研绘图的重要性和3D Max软件在科研领域的广泛应用,吸引了大量感兴趣…

不一样的年会彩瞳推荐,绮芙莉多款彩瞳彰显个性

临近年底,各种公司年会、跨年晚会活动也逐渐排上日程,出席这种正式场合,每个人都有自己的“杀手锏”,从发型妆容到穿搭都是变美小细节,作为心灵之窗的双眸,更需要一副彩瞳来提升我们的眼妆质感,…

《树莓派不吃灰》第二十四期:懒是第一生产力,为树莓派安装可视化开源管理面板1Panel

最近有哥们推荐了一个现代化Linux开源管理面板1Panel,开源且稳定,懒是第一生产力,虽然命令行很灵活,但图形化界面真的是懒人刚需,本期在树莓派部署一下1Panel,让树莓派Linux运维更省力,进一步降…

主存储器与CPU的连接

目录 一. 单块存储芯片与CPU的连接二. 多块存储芯片与CPU的连接2.1 位扩展2.2 字扩展2.3 字位扩展 三. 译码器知识点的补充 \quad 一. 单块存储芯片与CPU的连接 \quad \quad \quad 暴露出的引脚都是与CPU连接的 上面这个是88位的存储芯片 我们可以看到有8个字, 每个字的字长是8…

【MATLAB源码-第99期】基于matlab的OFDM系统卡尔曼滤波(kalman)信道估计,对比LS,MMSE。

操作环境: MATLAB 2022a 1、算法描述 卡尔曼滤波器(Kalman Filter)是一种有效的递归滤波器,它能够从一系列的含有噪声的测量中估计动态系统的状态。在无线通信领域,尤其是在正交频分复用(OFDM&#xff0…

【人工智能Ⅰ】实验7:K-means聚类实验

实验7 K-means聚类实验 一、实验目的 学习K-means算法基本原理,实现Iris数据聚类。 二、实验内容 应用K-means算法对iris数据集进行聚类。 三、实验结果及分析 0:输出数据集的基本信息 参考代码在main函数中首先打印了数据、特征名字、目标值、目标…

【C语言】操作符详解(一):进制转换,原码,反码,补码

目录 操作符分类 2进制和进制转换 2进制转10进制 10进制转2进制 2进制转8进制和16进制 2进制转8进制 2进制转16进制 原码、反码、补码 操作符分类 操作符中有一些操作符和二进制有关系,我们先铺垫一下二进制的和进制转换的知识。 2进制和进制转换 其实我们经…

Java+Swing: 主界面的窗体 整理8

主界面的写法跟之前登录界面的窗体写法大致相同,在主界面中主要是窗体的大小的设置 package com.student_view;import com.utils.DimensionUtil; import sun.applet.Main;import javax.swing.*; import java.awt.*; import java.net.URL;/*** Author:xie…

基于STM32 + DMA介绍,应用和步骤详解(ADC多通道)

前言 本篇博客主要学习了解DMA的工作原理和部分寄存器解析,针对ADC多通道来对代码部分,应用部分作详细讲解,掌握代码编程原理。本篇博客大部分是自己收集和整理,如有侵权请联系我删除。 本次博客开发板使用的是正点原子精英版&am…

已发表的论文职称查重率高【详细说明】

大家好,今天来聊聊已发表的论文职称查重率高,希望能给大家提供一点参考。 以下是针对论文重复率高的情况,提供一些修改建议和技巧: 已发表的论文职称查重率高 背景介绍 在学术界,论文的原创性和重复率是评价一篇论文质…

【安卓】安卓xTS之Media模块 学习笔记(3) VTS测试

1. 背景 接下来进行正式的VTS测试。本章节还是以Media模块相关进行介绍。 VTS主要测的是内核和HAL层,media的hal层是以openMax(即将废弃,今日2023.12) 和 Codec2 (后续主流) 接口为主。 这里我们只看Codec2的要求,CDD…

《师兄啊师兄》第二季来了!它凭什么成为修仙流里第一档?

沉寂大半年,修仙喜剧动画《师兄啊师兄》第二季终于“千呼万唤始出来”,即将在12月14日上线。作为优酷动漫本年度的当家之作,这部可谓是热度口碑双丰收,截至第一季收官,相关话题在短视频平台的累计播放量更是高达43亿&a…

字符串函数`strlen`、`strcpy`、`strcmp`、`strstr`、`strcat`的使用以及模拟实现

文章目录 🚀前言🚀库函数strlen✈️strlen的模拟实现 🚀库函数strcpy✈️strcpy的模拟实现 🚀strcmp✈️strcmp的模拟实现 🚀strstr✈️strstr的模拟实现 🚀strcat✈️strcat的模拟实现 🚀前言 …

OpenCV基础篇

OpenCV基础篇 一、图像、视频读取二、cv::Mat()数据类型三、绘图功能四、鼠标响应事件五、图像像素读写六、图像像素运算七、颜色空间转换八、图像几何变换九、图像滤波十、图像二值化十一、图像梯度十二、Canny边缘检测十三、图像形态学十四、图像直方图十五、霍夫变换十六、分…

jsp使用 分页专用工具

分页器,根据过来的参数计算当着页应当从哪一条记录开始显示,并且显示到哪。 PageUtils [pageSize5, currIndex1, totalCount166, totalPage34, startPosition0] PageUtils [pageSize5, currIndex5, totalCount166, totalPage34, startPosition20] PageUt…