fix cdn & new 新年灯笼

This commit is contained in:
底层用户 2022-01-12 23:24:24 +08:00
parent b8c3c871aa
commit 42723f01a0
5 changed files with 381 additions and 6 deletions

30
css/cursor.css Normal file
View 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
View 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
}
}

View File

@ -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>&nbsp;星期进度条显示错误</span> <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;移动端动画及细节</span>
<span class="uptext"><i class="fad fa-wrench"></i>&nbsp;Js&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> </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
View 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
View 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)
}));