css入门指导

本页面用于存放各种css文件的片段，已便于制作新版式时快速寻找。

此代码可以更改页面标题

:root {
    --header-title: "主标题";
    --header-subtitle: "副标题";
}

此代码可以创建自定义块
代码生成可以查看点击跳转

.块的名称{
块的代码
    }

此代码可以更改侧栏

div#side-bar div.side-block {
    background: rgb(底部颜色);
}
div#side-bar div.side-block div.heading,
div#side-bar div.collapsible-block-unfolded-link,
div#side-bar div.collapsible-block-unfolded-link div.collapsible-block-link {
    color: rgb(表头颜色);
    border-color: rgb(表头颜色);
}

此代码可以让页面上出现覆盖全屏的横向条纹

#extrac-div-1 {
    position: fixed;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    background: repeating-linear-gradient(180deg,rgba(条纹颜色,0),rgba(条纹颜色,.15) 50%,rgba(条纹颜色,0));
    background-size: auto 8px;
    opacity: 0.7;
}

此代码可以让页面上出现由上到下的扫描线

#extrac-div-2 {
    position: fixed;
    width: 100vw;
    height : 1rem;
    top: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(线的颜色,0) 0%,rgba(线的颜色,1) 50%,rgba(线的颜色,0.98) 51%,rgba(线的颜色,0) 100%);
    opacity : .1;
    animation: scanm 6s linear infinite;
}

此代码可以让页面上出现渐变的彩色氛围

#extrac-div-3 {
    position: fixed;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    background-image: radial-gradient(circle, rgb(0,0,0) 0%, rgb(深色代码) 60%, rgb(浅色代码) 100%);
    opacity: 0.25;
    mix-blend-mode: color-dodge;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 30;
}

此代码可以让页面上出现下落方块

  #container-wrap:before,
  #container-wrap:after {
    animation: notes 10s linear infinite;
    background: transparent;
    box-shadow: 0px 800px #16进制颜色代码, 150px 594px #16进制颜色代码, 300px 345px #16进制颜色代码, 450px 893px #16进制颜色代码, 600px 1276px #16进制颜色代码, 750px 1068px #16进制颜色代码, 900px 123px #16进制颜色代码, 1050px 1498px #16进制颜色代码, 1200px 678px #16进制颜色代码, 1350px 904px #16进制颜色代码, 1500px 102px #16进制颜色代码, 1650px 254px #16进制颜色代码, 1800px 34px #16进制颜色代码, 1950px 789px #16进制颜色代码, 2100px 129px #16进制颜色代码;
    border-radius: 3px;
    content: " ";
    display: circle;
    height: 15px;
    position: fixed;
    width: 100px;
    z-index: 1;
    transparent: 0;
    opacity: 0.6;
  }
@keyframes notes {
   from {
    transform: translateY(-2000px);
   }
   to {
    transform: translateY(0px)
   }
}

此代码可以让页面上出现下落方块