Skip to content

Commit

Permalink
fix cdn & new 新年灯笼
Browse files Browse the repository at this point in the history
  • Loading branch information
底层用户 committed Jan 12, 2022
1 parent b8c3c87 commit 42723f0
Show file tree
Hide file tree
Showing 5 changed files with 381 additions and 6 deletions.
30 changes: 30 additions & 0 deletions css/cursor.css
View file
Original file line number Diff line number Diff line change
@@ -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 changes: 223 additions & 0 deletions css/lantern.css
View file
Original file line number Diff line number Diff line change
@@ -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 changes: 11 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/[email protected]/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 || [];
Expand Down Expand Up @@ -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>
Expand All @@ -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/[email protected]/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>
Loading

0 comments on commit 42723f0

Please sign in to comment.