画江湖美化教程合集（长期更新）

/**彩色滚动条*/
::-webkit-scrollbar {
    width: 8px;  
    height: 1px;
}
::-webkit-scrollbar-thumb {
    background-color: #12b7f5;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #f6f6f6;
}

<!--首页问候-->
 <div id="greetingBox"></div>
    <style>
        #greetingBox {
            position: fixed;
            top: 10px;
            left: 15%;
            width: 400px;
            text-align: center;
            z-index: 10000;
            pointer-events: none
        }

        #greeting {
            display: inline-block;
            position: relative;
            opacity: 0;
            top: -110px;
            padding: 5px 40px;
            border-radius: 50px;
            background-color: #fff;
            color: #000;
            font-size: small;
            transition: .5s;
            box-shadow: rgb(0 0 0 / 5%) 0 10px 20px
        }

        #greeting.shown {
            opacity: 1;
            top: 0
        }
    </style>
    <script>
        (() => {
            const greeting = [{"realNode":{"greeting":"\u5DF2\u7ECF\u5F88\u665A\u4E86\uFF0C\u65E9\u70B9\u4F11\u606F\uD83E\uDD17\uFF01","start_time":"22","end_time":"0"}},{"realNode":{"greeting":"\u65E9\u4E0A\u597D\u9E2D\uD83D\uDC4B, \u65E9\u996D\u8BB0\u5F97\u5403\u54E6\uFF0C\u795D\u4F60\u4E00\u5929\u597D\u5FC3\u60C5\uFF01","start_time":6,"end_time":9}},{"realNode":{"greeting":"\u4E0A\u5348\u597D\uD83D\uDC4B, \u72B6\u6001\u5F88\u597D\uFF0C\u9F13\u52B1\u4E00\u4E0B","start_time":10,"end_time":10}},{"realNode":{"greeting":"11\u70B9\u591A\u5566, \u518D\u575A\u6301\u4E00\u4E0B\u5C31\u5403\u996D\u5566\uD83C\uDF71\uFF5E","start_time":11,"end_time":11}},{"realNode":{"greeting":"\u5348\u5B89\uD83D\uDC4B, \u5B9D\u8D1D","start_time":12,"end_time":14}},{"realNode":{"greeting":"\uD83C\uDF08\u5145\u5B9E\u7684\u4E00\u5929\u8F9B\u82E6\u5566\uFF01","start_time":14,"end_time":18}},{"realNode":{"greeting":"19\u70B9\u55BD, \u5956\u52B1\u4E00\u987F\u4E30\u76DB\u7684\u5927\u9910\u5427\uD83C\uDF54\u3002","start_time":19,"end_time":19}},{"realNode":{"greeting":"\u665A\u4E0A\u597D\uD83D\uDC4B, \u5728\u5C5E\u4E8E\u81EA\u5DF1\u7684\u65F6\u95F4\u597D\u597D\u653E\u677E\uD83D\uDE0C~","start_time":20,"end_time":"22"}},{"realNode":{"greeting":"\u5DF2\u7ECF\u5F88\u665A\u4E86\uFF0C\u6700\u8FD1\u8FC7\u7684\u8FD8\u597D\u5417\uD83E\uDE77\uFF1F","start_time":"0","end_time":"3"}},{"realNode":{"greeting":"\u6E05\u6668\u7684\u9633\u5149\u5C31\u8981\u51FA\u6765\u4E86\u2600\uFE0F\uFF01","start_time":"3","end_time":"6"}}].map((itme) => {
                return itme.realNode
            })
            let e = greeting.length !== 0 ? greeting : [
                {
                    greeting: "晚安",
                    start_time: 0,
                    end_time: 5
                }, {
                    greeting: "早上好鸭, 祝你一天好心情！",
                    start_time: 6,
                    end_time: 9
                }, {
                    greeting: "上午好, 状态很好，鼓励一下～",
                    start_time: 10,
                    end_time: 10
                }, {
                    greeting: "11点多啦, 在坚持一下就吃饭啦～",
                    start_time: 11,
                    end_time: 11
                }, {
                    greeting: "午安, 宝贝",
                    start_time: 12,
                    end_time: 14
                }, {
                    greeting: "充实的一天辛苦啦！",
                    start_time: 14,
                    end_time: 18
                }, {
                    greeting: "19点喽, 奖励一顿丰盛的大餐吧。",
                    start_time: 19,
                    end_time: 19
                }, {
                    greeting: "晚上好, 在属于自己的时间好好放松~",
                    start_time: 20,
                    end_time: 24
                }];
            let t = document.createElement("div");
            t.id = "greeting", setTimeout((() => {
                t.classList.add("shown")
            }), 1e3);
            let i = document.querySelector("#greetingBox");
            i.appendChild(t);
            const n = (new Date).getHours();
            let r = "晚上好";
            for (let t = 0; t < e.length; t++) if (n >= e[t].start_time && n <= e[t].end_time) {
                r = e[t].greeting;
                break
            }
            t.innerHTML = r, setTimeout((() => {
                t.classList.remove("shown"), setTimeout((() => {
                    i.remove()
                }), 500)
            }), 3e3)
        })()
    </script>

/* 自定义动画hr样式www.39ip.cn*/
hr {
	border: 0;
	/* 清除默认边框*/
	height: 2px;
	/* 设置高度*/
	background: linear-gradient(to right, #4285f4, #34a853, #fbbc05, #ea4335);
	/* 使用渐变颜色作为背景*/
	margin: 20px 0;
	/* 设置上下边距*/
	background-size: 400% 100%;
	/* 添加背景尺寸*/
	animation: colorChange 4s linear infinite;
	/* 添加动画效果*/
}

@keyframes colorChange {
	0% {
		background-position: 100% 0;
	}

	100% {
		background-position: -100% 0;
	}
}

<div>
  <!--网站声明代码start-->
  <div>
    <fieldset
      style="
        border: 1px dashed #008cff;
        padding: 10px;
        border-radius: 5px;
        line-height: 2em;
        color: #6d6d6d;
      "
    >
      <legend
        align="center"
        style="
          width: 30%;
          text-align: center;
          background-color: #008cff;
          border-radius: 5px;
         background-image: linear-gradient(to right, #FFCC99, #FF99CC); text-align:center;" 
        "
      >
        文章版权声明
      </legend>
      1、本网站名称：<span style="color: #3333ff"
        ><span style="color: #FF6666; font-size: 18px"
          ><strong>画江湖</strong></span
        ></span
      ><br />
      2、本站永久网址：<font color="#FF6666">https://www.39ip.cn</font
      ><br />
      3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长号6447834进行删除处理。<br />
      4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br />
      5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br />
      6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br />
    </fieldset>
  </div>
  <!--网站声明代码end--><br />
</div>