fix cdn & new 新年灯笼
This commit is contained in:
parent
b8c3c871aa
commit
42723f01a0
30
css/cursor.css
Normal file
30
css/cursor.css
Normal file
@ -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
|
||||||
|
}
|
223
css/lantern.css
Normal file
223
css/lantern.css
Normal file
@ -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
|
||||||
|
}
|
||||||
|
}
|
17
index.html
17
index.html
@ -15,24 +15,26 @@
|
|||||||
<title>無名の主页</title>
|
<title>無名の主页</title>
|
||||||
<!-- 引入样式 -->
|
<!-- 引入样式 -->
|
||||||
<link rel="stylesheet" type="text/css"
|
<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/style.css">
|
||||||
<link rel="stylesheet" type="text/css" href="./css/mobile.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/font.css">
|
||||||
<link rel="stylesheet" type="text/css" href="./css/loading.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/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="icon" href="./favicon.ico">
|
||||||
<link rel="apple-touch-icon" href="./img/apple-touch-icon.png">
|
<link rel="apple-touch-icon" href="./img/apple-touch-icon.png">
|
||||||
<!-- 引入 Izitoast -->
|
<!-- 引入 Izitoast -->
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast@1.4.0/dist/css/iziToast.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css">
|
||||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/izitoast@1.4.0/dist/js/iziToast.min.js"></script>
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>
|
||||||
<!-- 引入 Fontawesome -->
|
<!-- 引入 Fontawesome -->
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-fontawesome-pro@master/css/all.min.css"
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-fontawesome-pro@master/css/all.min.css"
|
||||||
media="all">
|
media="all">
|
||||||
<!--引入 Vue
|
<!--引入 Vue
|
||||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>-->
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>-->
|
||||||
<!-- 引入 jQuery -->
|
<!-- 引入 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>
|
<script>
|
||||||
var _hmt = _hmt || [];
|
var _hmt = _hmt || [];
|
||||||
@ -324,7 +326,8 @@
|
|||||||
<span class="uptext"><i class="fad fa-wrench"></i> 星期进度条显示错误</span>
|
<span class="uptext"><i class="fad fa-wrench"></i> 星期进度条显示错误</span>
|
||||||
<span class="uptext"><i class="fad fa-wrench"></i> 移动端动画及细节</span>
|
<span class="uptext"><i class="fad fa-wrench"></i> 移动端动画及细节</span>
|
||||||
<span class="uptext"><i class="fad fa-wrench"></i> Js 文件优化</span>
|
<span class="uptext"><i class="fad fa-wrench"></i> Js 文件优化</span>
|
||||||
<span class="uptext"><i class="fad fa-undo-alt"></i> <a href="./old/" style="color:#efefef">返回旧版站点</a></span>
|
<span class="uptext"><i class="fad fa-undo-alt"></i> <a href="./old/"
|
||||||
|
style="color:#efefef">返回旧版站点</a></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -341,7 +344,9 @@
|
|||||||
<!-- JS -->
|
<!-- JS -->
|
||||||
<script type="text/javascript" src="./js/main.js"></script>
|
<script type="text/javascript" src="./js/main.js"></script>
|
||||||
<script type="text/javascript" src="./js/time.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>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
96
js/cursor.js
Normal file
96
js/cursor.js
Normal file
@ -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()
|
||||||
|
})();
|
21
js/lantern.js
Normal file
21
js/lantern.js
Normal file
@ -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)
|
||||||
|
}));
|
Loading…
Reference in New Issue
Block a user