Skip to content

Commit c8f58d6

Browse files
author
wu-kan
committed
增加一段启动动画
1 parent 7e29f2b commit c8f58d6

File tree

4 files changed

+217
-166
lines changed

4 files changed

+217
-166
lines changed

‎README.md

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
---
2-
title: Home
2+
title: wu-kan
33
---
44

55
## Contact
66

77
- Address: **Sun Yat-sen University - 132 Waihuan East Rd. - Guangzhou, China**
88
- Phone: **+86 18756280097**
99
- E-mail:
10-
- **wu.kan@foxmail.com**
10+
- **i@wu-kan.cn**
1111
- **[email protected]**
12-
- **[email protected]**
13-
- WeChat: **Wu-\_-Kan**
12+
- WeChat: **Wu-_-Kan**
1413
- QQ: **942759535**
1514
- Site: **<https://wu-kan.cn>**
1615

‎_config.yml

Lines changed: 127 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ jekyll-theme-WuK: # 我的主题的自定义样式都在这个命名空间
164164
disable: true
165165
default:
166166
body:
167-
theme-base: theme-base-0d # 可选的值08~0f，见https://github.com/poole/lanyon
167+
theme-base: theme-base-07 # 可选的值08~0f，见https://github.com/poole/lanyon
168168
layout-reverse: false # 开启后sidebar在右边，反之左边
169169
sidebar-overlay: false # 开启后正文不随sidebar移动而移动
170170
masthead:
@@ -498,117 +498,136 @@ jekyll-theme-WuK: # 我的主题的自定义样式都在这个命名空间
498498
></script>
499499
- | # 在这里自定义页面样式吧
500500
<style>
501-
pre {
502-
max-height: 50vh;
503-
overflow: auto;
504-
background-color: rgba(0, 0, 0, 0);
505-
}
506-
img {
507-
display: inline-block;
508-
margin: 0;
509-
}
510-
html,
511-
h1,
512-
h2,
513-
h3,
514-
h4,
515-
h5,
516-
h6,
517-
.sidebar {
518-
font-family: Menlo, Monaco, "Courier New", Microsoft JhengHei, monospace;
519-
}
520-
.wrap {
521-
display: inline-block;
522-
background-size: 100vw auto;
523-
background-position: center top;
524-
background-repeat: no-repeat;
525-
background-attachment: fixed;
526-
background-image: url(https://cdn.jsdelivr.net/gh/wu-kan/jekyll-theme-WuK/assets/image/74559485_p1.webp);
527-
}
528-
@media (min-aspect-ratio: 2400/1850) {
501+
pre {
502+
max-height: 50vh;
503+
overflow: auto;
504+
background-color: rgba(0, 0, 0, 0);
505+
}
506+
img {
507+
display: inline-block;
508+
margin: 0;
509+
}
510+
html,
511+
h1,
512+
h2,
513+
h3,
514+
h4,
515+
h5,
516+
h6,
517+
.sidebar {
518+
font-family: Menlo, Monaco, "Courier New", Microsoft JhengHei, monospace;
519+
}
529520
.wrap {
530-
background-image: url(https://cdn.jsdelivr.net/gh/wu-kan/jekyll-theme-WuK/assets/image/71932901_p0.webp);
521+
display: inline-block;
522+
background-size: 100vw auto;
523+
background-position: center top;
524+
background-repeat: no-repeat;
525+
background-attachment: fixed;
526+
background-image: url(https://cdn.jsdelivr.net/gh/wu-kan/jekyll-theme-WuK/assets/image/74559485_p1.webp);
527+
}
528+
@media (min-aspect-ratio: 2400/1850) {
529+
.wrap {
530+
background-image: url(https://cdn.jsdelivr.net/gh/wu-kan/jekyll-theme-WuK/assets/image/71932901_p0.webp);
531+
}
532+
}
533+
.masthead {
534+
background-color: rgba(255, 255, 255, 0.9);
535+
box-shadow: 0 .25rem .5rem rgba(0, 0, 0, 0.1);
536+
}
537+
.content {
538+
background-color: rgba(255, 255, 255, 0.8);
539+
box-shadow: 0 .25rem .5rem .5rem rgba(255, 255, 255, 0.8);
540+
border: none;
541+
animation: animationAppear 2s;
542+
}
543+
@keyframes animationAppear {
544+
0% {
545+
opacity: 0;
546+
}
547+
50% {
548+
opacity: 0;
549+
}
550+
100% {}
551+
}
552+
@media (min-width: 70em) {
553+
.container {
554+
max-width: 42rem;
555+
}
556+
}
557+
@media (min-width: 96em) {
558+
.container {
559+
max-width: 48rem;
560+
}
561+
}
562+
/* Hide the sidebar checkbox that we toggle with `.sidebar-toggle` */
563+
.sidebar-checkbox {
564+
display: none;
565+
}
566+
.sidebar-toggle {
567+
position: fixed;
568+
}
569+
.sidebar-toggle:before,
570+
.sidebar-toggle:active:before,
571+
#sidebar-checkbox:focus~.sidebar-toggle:before,
572+
#sidebar-checkbox:checked~.sidebar-toggle:before {
573+
background-image: none;
574+
}
575+
/*头像效果-start*/
576+
.effect {
577+
margin: 1rem;
578+
-webkit-perspective: 900px;
579+
-moz-perspective: 900px;
580+
perspective: 900px;
581+
}
582+
.effect-info {
583+
text-align: center;
584+
-webkit-backface-visibility: hidden;
585+
backface-visibility: hidden;
586+
position: absolute;
587+
top: 0;
588+
-webkit-transform-style: preserve-3d;
589+
-moz-transform-style: preserve-3d;
590+
-ms-transform-style: preserve-3d;
591+
-o-transform-style: preserve-3d;
592+
transform-style: preserve-3d;
593+
}
594+
.effect-img {
595+
z-index: 11;
596+
width: 100%;
597+
height: 100%;
598+
position: relative;
599+
-webkit-transition: all 0.5s ease-in-out;
600+
-moz-transition: all 0.5s ease-in-out;
601+
transition: all 0.5s ease-in-out;
602+
}
603+
.effect-img:before {
604+
position: absolute;
605+
display: block;
606+
}
607+
.effect-right_to_left .effect-img {
608+
-webkit-transform-origin: 0% 50%;
609+
-moz-transform-origin: 0% 50%;
610+
-ms-transform-origin: 0% 50%;
611+
-o-transform-origin: 0% 50%;
612+
transform-origin: 0% 50%;
613+
}
614+
.effect-right_to_left:hover .effect-img {
615+
-webkit-transform: rotate3d(0, 1, 0, -180deg);
616+
-moz-transform: rotate3d(0, 1, 0, -180deg);
617+
-ms-transform: rotate3d(0, 1, 0, -180deg);
618+
-o-transform: rotate3d(0, 1, 0, -180deg);
619+
transform: rotate3d(0, 1, 0, -180deg);
531620
}
532-
}
533-
.masthead {
534-
border-bottom: 0;
535-
margin-bottom: 0;
536-
}
537-
.content {
538-
background-color: rgba(255, 255, 255, 0.8);
539-
box-shadow: 0 0 9px 9px rgba(255, 255, 255, 0.8);
540-
text-shadow: 1px 1px 1px #fff;
541-
}
542-
@media (min-width: 70em) {
543-
.container {
544-
max-width: 42rem;
621+
/*头像效果-end*/
622+
/*滚动条效果-start*/
623+
::-webkit-scrollbar {
624+
width: 4px;
625+
height: 4px;
545626
}
546-
}
547-
@media (min-width: 96em) {
548-
.container {
549-
max-width: 48rem;
627+
::-webkit-scrollbar-thumb {
628+
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
550629
}
551-
}
552-
/* Hide the sidebar checkbox that we toggle with `.sidebar-toggle` */
553-
.sidebar-checkbox {
554-
display: none;
555-
}
556-
.sidebar-toggle {
557-
position: fixed;
558-
}
559-
.sidebar-toggle:before,
560-
.sidebar-toggle:active:before,
561-
#sidebar-checkbox:focus ~ .sidebar-toggle:before,
562-
#sidebar-checkbox:checked ~ .sidebar-toggle:before {
563-
background-image: none;
564-
}
565-
/*头像效果-start*/
566-
.effect {
567-
margin: 1rem;
568-
-webkit-perspective: 900px;
569-
-moz-perspective: 900px;
570-
perspective: 900px;
571-
}
572-
.effect-info {
573-
text-align: center;
574-
-webkit-backface-visibility: hidden;
575-
backface-visibility: hidden;
576-
position: absolute;
577-
top: 0;
578-
-webkit-transform-style: preserve-3d;
579-
-moz-transform-style: preserve-3d;
580-
-ms-transform-style: preserve-3d;
581-
-o-transform-style: preserve-3d;
582-
transform-style: preserve-3d;
583-
}
584-
.effect-img {
585-
z-index: 11;
586-
width: 100%;
587-
height: 100%;
588-
position: relative;
589-
-webkit-transition: all 0.5s ease-in-out;
590-
-moz-transition: all 0.5s ease-in-out;
591-
transition: all 0.5s ease-in-out;
592-
}
593-
.effect-img:before {
594-
position: absolute;
595-
display: block;
596-
}
597-
.effect-right_to_left .effect-img {
598-
-webkit-transform-origin: 0% 50%;
599-
-moz-transform-origin: 0% 50%;
600-
-ms-transform-origin: 0% 50%;
601-
-o-transform-origin: 0% 50%;
602-
transform-origin: 0% 50%;
603-
}
604-
.effect-right_to_left:hover .effect-img {
605-
-webkit-transform: rotate3d(0, 1, 0, -180deg);
606-
-moz-transform: rotate3d(0, 1, 0, -180deg);
607-
-ms-transform: rotate3d(0, 1, 0, -180deg);
608-
-o-transform: rotate3d(0, 1, 0, -180deg);
609-
transform: rotate3d(0, 1, 0, -180deg);
610-
}
611-
/*头像效果-end*/
630+
/*滚动条效果end*/
612631
</style>
613632
614633
readme_index:

0 commit comments

Comments
 (0)