/* iconfont图标 */ svg.icon { width: 1.2em; height: 1.2em; /* width和height定义图标的默认宽度和高度*/ vertical-align: -0.15em; fill: currentColor; overflow: hidden; } /* iconfont图标 */ /* 自定义字体 */ @font-face{ font-family: 'lxgwshare' ; /* 自定义字体名称 */ /* src: url('https://s1.vika.cn/space/2022/09/28/0b1146dc6983496da0856f836cf4b9a2?attname=lxgwshare.ttf'); */ /* 引入字体文件的路径 */ src: url('https://pic.hycbook.com/i/hexo/source/ZhuZiAWan2.zip'); /* 引入字体文件的路径 */ format('woff2'); } /*应用在body体里,放在第一个,font-family会按顺序使用字体族。如果第一个没找到就会找第二个,以此类推。*/ body { font-family: lxgwshare,-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", "STZhongsong", "Lantinghei SC", sans-serif } /* 自定义字体 */ /* 自定义鼠标 */ body { cursor:url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur), default; } a,img { cursor:url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur), default; } /* 自定义鼠标 */ /* 自定义右键 */ #rightMenu { display: none; position: fixed; padding: 0 .25rem; width: 9rem; height: fit-content; top: 10%; left: 10%; background-color: rgba(238, 255, 255, .85); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #363636; border-radius: 12px; z-index: 99994; border: #e3e8f7; user-select: none; box-shadow: rgba(0, 0, 0, .05); } #rightMenu a { color: #363636; } #rightMenu .rightMenu-group { padding: .35rem .3rem; transition: .3s } #rightMenu .rightMenu-line { border-top: 1px dashed #4259ef23 } #rightMenu .rightMenu-group.rightMenu-small { display: flex; justify-content: space-between } #rightMenu .rightMenu-group .rightMenu-item { border-radius: 8px; transition: .3s; cursor: pointer } #rightMenu .rightMenu-line .rightMenu-item { margin: .25rem 0; padding: .25rem 0 } #rightMenu .rightMenu-group.rightMenu-line .rightMenu-item { display: flex } #rightMenu .rightMenu-group .rightMenu-item:hover { background-color: #6f42c1; color: #fff; } #rightMenu .rightMenu-group .rightMenu-item:active { transform: scale(.97) } #rightMenu .rightMenu-group .rightMenu-item i { display: inline-block; text-align: center; line-height: 1.5rem; width: 1.5rem; padding: 0 .25rem } #rightMenu .rightMenu-line .rightMenu-item i { margin: 0 .25rem } #rightMenu .rightMenu-group .rightMenu-item span { line-height: 1.5rem } .rightMenu-small .rightMenu-item { width: 30px; height: 30px; line-height: 30px } #rightmenu-mask { position: fixed; width: 100vw; height: 100vh; background: 0 0; top: 0; left: 0; display: none; z-index: 101; margin: 0 !important; z-index: 99993 } /* 自定义右键 */ /* 自定义非首页的top图片的高度 */ #page-header.post-bg { height: 800px; } #page-header.not-home-page { height: 800px;} /* 自定义非首页的top图片的高度 */ /* 自定义页脚的高度 */ #footer-wrap { position: relative; padding: 5px 20px; color: var(--light-grey); text-align: center; } /* 自定义页脚的高度 */ /* 文章页背景 */ .layout > div:first-child:not(.recent-posts) { /* 以下代表白色透明度为0.3 */ background: rgba(255, 255, 255, 0.0); } /* 所有背景(包括首页卡片、文章页、页面页等) */ #recent-posts > .recent-post-item, .layout > div:first-child:not(.recent-posts), .layout_post > #page, .layout_post > #post, .read-mode .layout_post > #post { /* 以下代表白色透明度为0.3 */ background: rgba(255, 255, 255, 0.0); } /* 打赏按钮投币彩蛋效果 https://akilar.top/posts/23fdf850/ */ .tip-button { border: 0; border-radius: 0.25rem; cursor: pointer; font-size: 20px; font-weight: 600; height: 2.6rem; margin-bottom: -4rem; outline: 0; position: relative; top: 0; transform-origin: 0% 100%; transition: transform 50ms ease-in-out; width: auto; -webkit-tap-highlight-color: transparent; } .tip-button:active { transform: rotate(4deg); } .tip-button.clicked { animation: 150ms ease-in-out 1 shake; pointer-events: none; } .tip-button.clicked .tip-button__text { opacity: 0; transition: opacity 100ms linear 200ms; } .tip-button.clicked::before { height: 0.5rem; width: 60%; background: $button-hover-color; } .tip-button.clicked .coin { transition: margin-bottom 1s linear 200ms; margin-bottom: 0; } .tip-button.shrink-landing::before { transition: width 200ms ease-in; width: 0; } .tip-button.coin-landed::after { opacity: 1; transform: scale(1); transform-origin: 50% 100%; } .tip-button.coin-landed .coin-wrapper { background: radial-gradient(circle at 35% 97%, rgba(3, 16, 50, 0.4) 0.04rem, transparent 0.04rem), radial-gradient(circle at 45% 92%, rgba(3, 16, 50, 0.4) 0.04rem, transparent 0.02rem), radial-gradient(circle at 55% 98%, rgba(3, 16, 50, 0.4) 0.04rem, transparent 0.04rem), radial-gradient(circle at 65% 96%, rgba(3, 16, 50, 0.4) 0.06rem, transparent 0.06rem); background-position: center bottom; background-size: 100%; bottom: -1rem; opacity: 0; transform: scale(2) translateY(-10px); } .tip-button__text { color: #fff; margin-right: 1.8rem; opacity: 1; position: relative; transition: opacity 100ms linear 500ms; z-index: 3; } .tip-button::before { border-radius: 0.25rem; bottom: 0; content: ''; display: block; height: 100%; left: 50%; position: absolute; transform: translateX(-50%); transition: height 250ms ease-in-out 400ms, width 250ms ease-in-out 300ms; width: 100%; z-index: 2; } .tip-button::after { bottom: -1rem; color: white; content: 'ヾ(≧O≦)〃嗷~'; /*点击后显示的内容*/ height: 110%; left: 0; opacity: 0; position: absolute; pointer-events: none; text-align: center; transform: scale(0); transform-origin: 50% 20%; transition: transform 200ms cubic-bezier(0, 0, 0.35, 1.43); width: 100%; z-index: 1; } .coin-wrapper { background: none; bottom: 0; height: 18rem; left: 0; opacity: 1; overflow: hidden; pointer-events: none; position: absolute; transform: none; transform-origin: 50% 100%; transition: opacity 200ms linear 100ms, transform 300ms ease-out; width: 100%; } .coin { --front-y-multiplier: 0; --back-y-multiplier: 0; --coin-y-multiplier: 0; --coin-x-multiplier: 0; --coin-scale-multiplier: 0; --coin-rotation-multiplier: 0; --shine-opacity-multiplier: 0.4; --shine-bg-multiplier: 50%; bottom: calc(var(--coin-y-multiplier) * 1rem - 3.5rem); height: 3.5rem; margin-bottom: 3.05rem; position: absolute; right: calc(var(--coin-x-multiplier) * 34% + 16%); transform: translateX(50%) scale(calc(0.4 + var(--coin-scale-multiplier))) rotate(calc(var(--coin-rotation-multiplier) * -1deg)); transition: opacity 100ms linear 200ms; width: 3.5rem; z-index: 3; } .coin__front, .coin__middle, .coin__back, .coin::before, .coin__front::after, .coin__back::after { border-radius: 50%; box-sizing: border-box; height: 100%; left: 0; position: absolute; width: 100%; z-index: 3; } .coin__front { background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(115, 124, 153, 0.4) 54%, #c2cadf 54%), linear-gradient(210deg, #8590b3 32%, transparent 32%), linear-gradient(150deg, #8590b3 32%, transparent 32%), linear-gradient(to right, #8590b3 22%, transparent 22%, transparent 78%, #8590b3 78%), linear-gradient(to bottom, #fcfaf9 44%, transparent 44%, transparent 65%, #fcfaf9 65%, #fcfaf9 71%, #8590b3 71%), linear-gradient(to right, transparent 28%, #fcfaf9 28%, #fcfaf9 34%, #8590b3 34%, #8590b3 40%, #fcfaf9 40%, #fcfaf9 47%, #8590b3 47%, #8590b3 53%, #fcfaf9 53%, #fcfaf9 60%, #8590b3 60%, #8590b3 66%, #fcfaf9 66%, #fcfaf9 72%, transparent 72%); background-color: #8590b3; background-size: 100% 100%; transform: translateY(calc(var(--front-y-multiplier) * 0.3181818182rem / 2)) scaleY(var(--front-scale-multiplier)); } .coin__front::after { background: rgba(0, 0, 0, 0.2); content: ''; opacity: var(--front-y-multiplier); } .coin__middle { background: #737c99; transform: translateY(calc(var(--middle-y-multiplier) * 0.3181818182rem / 2)) scaleY(var(--middle-scale-multiplier)); } .coin__back { background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(115, 124, 153, 0.4) 54%, #c2cadf 54%), radial-gradient(circle at 50% 40%, #fcfaf9 23%, transparent 23%), radial-gradient(circle at 50% 100%, #fcfaf9 35%, transparent 35%); background-color: #8590b3; background-size: 100% 100%; transform: translateY(calc(var(--back-y-multiplier) * 0.3181818182rem / 2)) scaleY(var(--back-scale-multiplier)); } .coin__back::after { background: rgba(0, 0, 0, 0.2); content: ''; opacity: var(--back-y-multiplier); } .coin::before { background: radial-gradient(circle at 25% 65%, transparent 50%, rgba(255, 255, 255, 0.9) 90%), linear-gradient(55deg, transparent calc(var(--shine-bg-multiplier) + 0%), #e9f4ff calc(var(--shine-bg-multiplier) + 0%), transparent calc(var(--shine-bg-multiplier) + 50%)); content: ''; opacity: var(--shine-opacity-multiplier); transform: translateY(calc(var(--middle-y-multiplier) * 0.3181818182rem / -2)) scaleY(var(--middle-scale-multiplier)) rotate(calc(var(--coin-rotation-multiplier) * 1deg)); z-index: 10; } .coin::after { background: #737c99; content: ''; height: 0.3181818182rem; left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; z-index: 2; } @keyframes shake { 0% { transform: rotate(4deg); } 66% { transform: rotate(-4deg); } 100% { transform: rotate(); } } /* 打赏按钮投币彩蛋效果 https://akilar.top/posts/23fdf850/ */ /* profile背景 */ #aside-content>.card-widget.card-info { background: linear-gradient(338deg,#bfb39c,#d1c0ba,#cee0f3,#ededea24,#f0f1f0); box-shadow: 0 0 5px #d4e659; position: relative; background-size: 400% 400%; -webkit-animation: Gradient 10s ease infinite; -moz-animation: Gradient 10s ease infinite; animation: Gradient 10s ease infinite!important } /* https://yisous.xyz/posts/ac792cf4/#鼠标指针 */ #cursor { position: fixed; width: 16px; height: 16px; background: #000; border-radius: 8px; opacity: 0.25; z-index: 10086; 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); }