-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f37bfbb
commit 66dc065
Showing
55 changed files
with
903 additions
and
1,993 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,102 @@ | ||
.container { | ||
/* text-align: right; */ | ||
transition: all .3s ease; | ||
margin-right: 20px; | ||
margin-left: calc(var(--sidebar-width) + 20px); | ||
min-width: 200px; | ||
} | ||
.title { | ||
margin: 20px; | ||
text-align: center; | ||
} | ||
|
||
.member-container { | ||
position: relative; | ||
display: inline-block; | ||
text-align: center; | ||
transition: all 1s ease; | ||
} | ||
|
||
.member-photo-container { | ||
margin: 20px; | ||
height: 100px; | ||
width: 100px; | ||
border-radius: 50%; | ||
border: 5px solid #f5f5f5; | ||
overflow: hidden; | ||
transition: all .4s ease; | ||
} | ||
|
||
.member-photo { | ||
width: 100%; | ||
height: 100%; | ||
} | ||
|
||
.member-name { | ||
display: block; | ||
} | ||
|
||
.introduction { | ||
background-color: #1f1f1f; | ||
position: absolute; /* 使用绝对定位 */ | ||
left: 50%; /* 水平居中 */ | ||
transform: translateX(-50%); /* 水平居中 */ | ||
width: 200px; | ||
height: 150px; | ||
/* opacity: 0; 初始透明度为0 */ | ||
clip-path: circle(0% at 50% 0%); /* 初始状态为圆形半径为0 */ | ||
transform-origin: top center; /* 变换基点为顶部中心 */ | ||
transition: clip-path 0.6s ease-out; /* 添加 clip-path 和 opacity 的过渡效果 */ | ||
pointer-events: none; /* 初始状态禁用鼠标事件 */ | ||
border-radius:20px; | ||
top:135px; | ||
} | ||
|
||
.introduction.show { | ||
clip-path: circle(100% at 50% 0%); /* 展开到完整半圆 */ | ||
pointer-events: auto; /* 允许鼠标事件 */ | ||
} | ||
|
||
.introduction.hide { | ||
clip-path: circle(0% at 50% 0%); /* 收缩回0% */ | ||
pointer-events: none; /* 禁用鼠标事件 */ | ||
} | ||
|
||
/* 定义展开动画 */ | ||
@keyframes expand { | ||
from { | ||
clip-path: circle(0% at 50% 0%); | ||
} | ||
to { | ||
clip-path: circle(100% at 50% 0%); | ||
} | ||
} | ||
|
||
/* 定义收缩动画 */ | ||
@keyframes collapse { | ||
from { | ||
clip-path: circle(100% at 50% 0%); | ||
} | ||
to { | ||
clip-path: circle(0% at 50% 0%); | ||
} | ||
} | ||
/* 遮罩层,用于变暗其他元素 */ | ||
.overlay { | ||
position: absolute; /* 使用 absolute 定位,避免影响页面布局 */ | ||
top: 0; | ||
left: 0; | ||
width: 100vw; | ||
height: 100vh; | ||
background: rgba(0, 0, 0, 0.4); /* 半透明黑色,造成变暗效果 */ | ||
z-index: 10; /* 设置为较小的值 */ | ||
pointer-events: none; /* 不阻挡点击事件 */ | ||
display: none; /* 默认隐藏 */ | ||
} | ||
|
||
/* 显示遮罩层时的样式 */ | ||
.overlay.show { | ||
display: block; | ||
transition: all 1s ease; | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Oops, something went wrong.