diff --git a/css/cursor.css b/css/cursor.css new file mode 100644 index 0000000..7ba077e --- /dev/null +++ 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,") 4 4, auto !important +} \ No newline at end of file diff --git a/css/lantern.css b/css/lantern.css new file mode 100644 index 0000000..97ccda8 --- /dev/null +++ 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 + } +} \ No newline at end of file diff --git a/index.html b/index.html index 2096f8e..619a484 100644 --- a/index.html +++ b/index.html @@ -15,24 +15,26 @@ 無名の主页 + href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css"> + + - - + + - + - + + + \ No newline at end of file diff --git a/js/cursor.js b/js/cursor.js new file mode 100644 index 0000000..527abb8 --- /dev/null +++ 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,") 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() +})(); \ No newline at end of file diff --git a/js/lantern.js b/js/lantern.js new file mode 100644 index 0000000..0fe77a6 --- /dev/null +++ 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 = '
新
年
', document.body.appendChild(t) +})); \ No newline at end of file