fix cdn & new 新年灯笼

2022-01-12 23:24:24 +08:00 · 2022-01-12 23:24:24 +08:00 · 42723f01a0
commit 42723f01a0
parent b8c3c871aa
5 changed files with 381 additions and 6 deletions
--- a/css/cursor.css
+++ b/css/cursor.css
@ -0,0 +1,30 @@
+#cursor {
+    position: fixed;
+    width: 18px;
+    height: 18px;
+    background: #ffffffcc;
+    border-radius: 50%;
+    opacity: 0.25;
+    z-index: 99999999;
+    pointer-events: none;
+    transition: 0.2s ease-in-out;
+    transition-property: background, opacity, transform;
+}
+
+#cursor.hidden {
+    opacity: 0;
+}
+
+#cursor.hover {
+    opacity: 0.1;
+    transform: scale(2.5);
+}
+
+#cursor.active {
+    opacity: 0.5;
+    transform: scale(0.5);
+}
+
+* {
+    cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='10px' height='10px'><circle cx='4' cy='4' r='4' fill='white' /></svg>") 4 4, auto !important
+}
--- a/css/lantern.css
+++ b/css/lantern.css
@ -0,0 +1,223 @@
+@charset "UTF-8";
+
+.lantern__warpper {
+    position: fixed;
+    top: 12px;
+    left: 40px;
+    pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    z-index: 999
+}
+
+.lantern__warpper.lantern__secondary {
+    left: calc(100% - 130px)
+}
+
+.lantern__warpper.lantern__secondary .lantern__box {
+    -webkit-animation-duration: 3s;
+    animation-duration: 3s
+}
+
+.lantern__box {
+    position: relative;
+    display: inline-block;
+    width: 90px;
+    height: 70px;
+    background: rgba(216, 0, 15, .8);
+    border-radius: 50% 50%;
+    animation: lantern-swing 3s ease-in-out infinite alternate-reverse;
+    -webkit-transform-origin: 50% -70px;
+    -ms-transform-origin: 50% -70px;
+    transform-origin: 50% -70px;
+    -webkit-box-shadow: -5px 5px 50px 4px #fa6c00;
+    box-shadow: -5px 5px 50px 4px #fa6c00
+}
+
+.lantern__box:after,
+.lantern__box:before {
+    content: "";
+    position: absolute;
+    height: 8px;
+    width: 45px;
+    left: 50%;
+    border: 1px solid #dc8f03;
+    background: -webkit-gradient(linear, left top, right top, from(#dc8f03), color-stop(orange), color-stop(#dc8f03), color-stop(orange), to(#dc8f03));
+    background: -o-linear-gradient(left, #dc8f03, orange, #dc8f03, orange, #dc8f03);
+    background: linear-gradient(90deg, #dc8f03, orange, #dc8f03, orange, #dc8f03)
+}
+
+.lantern__box:before {
+    top: 0;
+    border-radius: 5px 5px 0 0;
+    -webkit-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%)
+}
+
+.lantern__box:after {
+    bottom: 0;
+    border-radius: 0 0 5px 5px;
+    -webkit-transform: translate(-50%, 50%);
+    -ms-transform: translate(-50%, 50%);
+    transform: translate(-50%, 50%)
+}
+
+.lantern__line {
+    position: absolute;
+    width: 2px;
+    height: 12px;
+    top: 0;
+    left: 50%;
+    -webkit-transform: translate(-50%, -100%);
+    -ms-transform: translate(-50%, -100%);
+    transform: translate(-50%, -100%);
+    background: #dc8f03
+}
+
+.lantern__circle {
+    width: 80%;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box
+}
+
+.lantern__circle,
+.lantern__circle .lantern__ellipse {
+    height: 100%;
+    margin: 0 auto;
+    border-radius: 50%;
+    border: 2px solid #dc8f03
+}
+
+.lantern__circle .lantern__ellipse {
+    width: 50%
+}
+
+.lantern__circle .lantern__text {
+    font-family: 华文行楷, Microsoft YaHei, sans-serif;
+    font-size: 24.3px;
+    color: #dc8f03;
+    font-weight: 700;
+    line-height: 66px;
+    text-align: center
+}
+
+.lantern__tail {
+    position: relative;
+    width: 4px;
+    height: 12px;
+    margin: 0 auto;
+    animation: lantern-swing 3s ease-in-out infinite alternate-reverse;
+    background: orange;
+    border-radius: 0 0 5px 5px
+}
+
+.lantern__tail .lantern__junction {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 8px;
+    height: 8px;
+    -webkit-transform: translate(-50%, 8.4px);
+    -ms-transform: translate(-50%, 8.4px);
+    transform: translate(-50%, 8.4px);
+    background: #e69603;
+    border-radius: 50%
+}
+
+.lantern__tail .lantern__rect {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    -webkit-transform: translate(-50%, 10.8px);
+    -ms-transform: translate(-50%, 10.8px);
+    transform: translate(-50%, 10.8px);
+    width: 8px;
+    height: 24px;
+    background: orange;
+    border-radius: 5px 5px 0 5px
+}
+
+@-webkit-keyframes lantern-swing {
+    0% {
+        -webkit-transform: rotate(-8deg);
+        transform: rotate(-8deg)
+    }
+
+    to {
+        -webkit-transform: rotate(8deg);
+        transform: rotate(8deg)
+    }
+}
+
+@keyframes lantern-swing {
+    0% {
+        -webkit-transform: rotate(-8deg);
+        transform: rotate(-8deg)
+    }
+
+    to {
+        -webkit-transform: rotate(8deg);
+        transform: rotate(8deg)
+    }
+}
+
+@media (max-width:460px) {
+    .lantern__warpper {
+        top: 8px;
+        left: 30px
+    }
+
+    .lantern__warpper.lantern__secondary {
+        left: calc(100% - 80px)
+    }
+
+    .lantern__box {
+        width: 50px;
+        height: 40px;
+        -webkit-transform-origin: 50% -40px;
+        -ms-transform-origin: 50% -40px;
+        transform-origin: 50% -40px;
+        -webkit-box-shadow: -5px 5px 50px -1px #fa6c00;
+        box-shadow: -5px 5px 50px -1px #fa6c00
+    }
+
+    .lantern__box:after,
+    .lantern__box:before {
+        height: 4px;
+        width: 25px
+    }
+
+    .lantern__line {
+        width: 2px;
+        height: 8px
+    }
+
+    .lantern__circle .lantern__text {
+        font-size: 13.5px;
+        line-height: 38px
+    }
+
+    .lantern__tail {
+        width: 4px;
+        height: 8px
+    }
+
+    .lantern__tail .lantern__junction {
+        width: 8px;
+        height: 8px;
+        -webkit-transform: translate(-50%, 5.6px);
+        -ms-transform: translate(-50%, 5.6px);
+        transform: translate(-50%, 5.6px)
+    }
+
+    .lantern__tail .lantern__rect {
+        -webkit-transform: translate(-50%, 7.2px);
+        -ms-transform: translate(-50%, 7.2px);
+        transform: translate(-50%, 7.2px);
+        width: 8px;
+        height: 16px
+    }
+}
--- a/index.html
+++ b/index.html
@ -15,24 +15,26 @@
    <title>無名の主页</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css"
-        href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css">
+        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <link rel="stylesheet" type="text/css" href="./css/mobile.css">
    <link rel="stylesheet" type="text/css" href="./css/font.css">
    <link rel="stylesheet" type="text/css" href="./css/loading.css">
    <link rel="stylesheet" type="text/css" href="./css/animation.css">
+    <link rel="stylesheet" type="text/css" href="./css/cursor.css">
+    <link rel="stylesheet" type="text/css" href="./css/lantern.css">
    <link rel="icon" href="./favicon.ico">
    <link rel="apple-touch-icon" href="./img/apple-touch-icon.png">
    <!-- 引入 Izitoast -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast@1.4.0/dist/css/iziToast.min.css">
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/izitoast@1.4.0/dist/js/iziToast.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css">
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>
    <!-- 引入 Fontawesome -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-fontawesome-pro@master/css/all.min.css"
        media="all">
    <!--引入 Vue
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>-->
    <!-- 引入 jQuery -->
-    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- 百度统计 -->
    <script>
        var _hmt = _hmt || [];
@ -324,7 +326,8 @@
                            <span class="uptext"><i class="fad fa-wrench"></i>&nbsp;星期进度条显示错误</span>
                            <span class="uptext"><i class="fad fa-wrench"></i>&nbsp;移动端动画及细节</span>
                            <span class="uptext"><i class="fad fa-wrench"></i>&nbsp;Js&nbsp;文件优化</span>
-                            <span class="uptext"><i class="fad fa-undo-alt"></i>&nbsp;<a href="./old/" style="color:#efefef">返回旧版站点</a></span>
+                            <span class="uptext"><i class="fad fa-undo-alt"></i>&nbsp;<a href="./old/"
+                                    style="color:#efefef">返回旧版站点</a></span>
                        </div>
                    </div>
                </div>
@ -341,7 +344,9 @@
    <!-- JS -->
    <script type="text/javascript" src="./js/main.js"></script>
    <script type="text/javascript" src="./js/time.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
+    <script type="text/javascript" src="./js/cursor.js"></script>
+    <script type="text/javascript" src="./js/lantern.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
 </body>

 </html>
--- a/js/cursor.js
+++ b/js/cursor.js
@ -0,0 +1,96 @@
+var CURSOR;
+
+Math.lerp = (a, b, n) => (1 - n) * a + n * b;
+
+const getStyle = (el, attr) => {
+    try {
+        return window.getComputedStyle ?
+            window.getComputedStyle(el)[attr] :
+            el.currentStyle[attr];
+    } catch (e) {}
+    return "";
+};
+
+class Cursor {
+    constructor() {
+        this.pos = {
+            curr: null,
+            prev: null
+        };
+        this.pt = [];
+        this.create();
+        this.init();
+        this.render();
+    }
+
+    move(left, top) {
+        this.cursor.style["left"] = `${left}px`;
+        this.cursor.style["top"] = `${top}px`;
+    }
+
+    create() {
+        if (!this.cursor) {
+            this.cursor = document.createElement("div");
+            this.cursor.id = "cursor";
+            this.cursor.classList.add("hidden");
+            document.body.append(this.cursor);
+        }
+
+        var el = document.getElementsByTagName('*');
+        for (let i = 0; i < el.length; i++)
+            if (getStyle(el[i], "cursor") == "pointer")
+                this.pt.push(el[i].outerHTML);
+
+        document.body.appendChild((this.scr = document.createElement("style")));
+        this.scr.innerHTML =
+            `* {cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8px' height='8px'><circle cx='4' cy='4' r='4' opacity='.5'/></svg>") 4 4, auto}`;
+    }
+
+    refresh() {
+        this.scr.remove();
+        this.cursor.classList.remove("hover");
+        this.cursor.classList.remove("active");
+        this.pos = {
+            curr: null,
+            prev: null
+        };
+        this.pt = [];
+
+        this.create();
+        this.init();
+        this.render();
+    }
+
+    init() {
+        document.onmouseover = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.add("hover");
+        document.onmouseout = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.remove("hover");
+        document.onmousemove = e => {
+            (this.pos.curr == null) && this.move(e.clientX - 8, e.clientY - 8);
+            this.pos.curr = {
+                x: e.clientX - 8,
+                y: e.clientY - 8
+            };
+            this.cursor.classList.remove("hidden");
+        };
+        document.onmouseenter = e => this.cursor.classList.remove("hidden");
+        document.onmouseleave = e => this.cursor.classList.add("hidden");
+        document.onmousedown = e => this.cursor.classList.add("active");
+        document.onmouseup = e => this.cursor.classList.remove("active");
+    }
+
+    render() {
+        if (this.pos.prev) {
+            this.pos.prev.x = Math.lerp(this.pos.prev.x, this.pos.curr.x, 0.45);
+            this.pos.prev.y = Math.lerp(this.pos.prev.y, this.pos.curr.y, 0.45);
+            this.move(this.pos.prev.x, this.pos.prev.y);
+        } else {
+            this.pos.prev = this.pos.curr;
+        }
+        requestAnimationFrame(() => this.render());
+    }
+}
+
+(() => {
+    CURSOR = new Cursor();
+    // 需要重新获取列表时，使用 CURSOR.refresh()
+})();
--- a/js/lantern.js
+++ b/js/lantern.js
@ -0,0 +1,21 @@
+/*!
+ * china-lantern v1.6.0
+ * (c) 2020-2021 fz6m
+ * Released under the MIT License.
+ */
+! function (t) {
+    "function" == typeof define && define.amd ? define(t) : t()
+}((function () {
+    "use strict";
+    ! function (t, e) {
+        void 0 === e && (e = {});
+        var n = e.insertAt;
+        if (t && "undefined" != typeof document) {
+            var r = document.head || document.getElementsByTagName("head")[0],
+                a = document.createElement("style");
+            a.type = "text/css", "top" === n && r.firstChild ? r.insertBefore(a, r.firstChild) : r.appendChild(a), a.styleSheet ? a.styleSheet.cssText = t : a.appendChild(document.createTextNode(t))
+        }
+    };
+    var t;
+    (t = document.createElement("div")).className = "j-china-lantern", t.innerHTML = '<div class="lantern__warpper"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">新</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div><div class="lantern__warpper lantern__secondary"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">年</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div>', document.body.appendChild(t)
+}));