mirror/MCSManager
2
0
Fork 1
mirror of https://github.com/MCSManager/MCSManager.git synced 2024-11-21 03:12:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

增加一定的动画元素

Browse Source
This commit is contained in:
suwings 2018-03-12 14:37:51 +08:00
parent 8dd39b62c1
commit 7ebdada671
4 changed files with 92 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
public/common/css/action.css Normal file
View File

@ -0,0 +1,81 @@
/* 动画 CSS */
@keyframes ActionLeftButtonA {
0% {
background-color: rgb(226, 226, 0);
width: 20px;
}
100% {
width: 8px;
background-color: #4ebd2a;
}
}
@keyframes ActionLeftButtonB {
100% {
width: 20px;
background-color: rgb(226, 226, 0);
}
}
/* 公共颜色动作 */
@keyframes ActionCommonColorA {
0% {
background-color: rgb(1, 126, 188);
}
100% {
background-color: initial;
}
}
@keyframes ActionCommonColorB {
100% {
background-color: rgb(1, 126, 188);
}
}
/* 公共左边突出动作 */
@keyframes ActionMarginLeftA {
0% {
margin-left: 8px;
}
100% {
margin-left: 0px;
}
}
@keyframes ActionMarginLeftB {
100% {
margin-left: 8px;
}
}
/* Logo 动画 */
@keyframes ActionLogoA {
0% {
background-color: #016698;
}
100% {
background-color: #017EBC;
}
}
@keyframes ActionLogoB {
100% {
background-color: #016698;
}
}
/* 淡入 */
@keyframes ActionFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

2
public/common/css/block.css
View File

@ -40,6 +40,8 @@
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
margin-bottom: 16px;
background-color: #fff;
/* animation: ActionFadeIn 0.5s; 有淡入淡出动画
animation-fill-mode: forwards; */
}
.PanelBlue {

63
public/common/css/common.css
View File

@ -37,6 +37,13 @@ input {
#MasterLogo {
letter-spacing: 1.5px;
animation: ActionLogoA 1s;
animation-fill-mode: forwards;
}
#MasterLogo:hover {
animation: ActionLogoB 1s;
animation-fill-mode: forwards;
}
#SideCol {
@ -134,7 +141,7 @@ input {
padding-left: 20px;
font-size: 12px;
/* action */
animation: ActionCommonColorA 1s, ActionMarginLeftA 0.3s;
animation: ActionCommonColorA 1.4s, ActionMarginLeftA 0.3s;
animation-fill-mode: forwards;
}
@ -289,58 +296,4 @@ input {
width: 100%;
overflow: hidden;
line-height: 3px;
}
/* 动画 CSS */
@keyframes ActionLeftButtonA {
0% {
background-color: rgb(226, 226, 0);
width: 20px;
}
100% {
width: 8px;
background-color: #4ebd2a;
}
}
@keyframes ActionLeftButtonB {
100% {
width: 20px;
background-color: rgb(226, 226, 0);
}
}
/* 公共颜色动作 */
@keyframes ActionCommonColorA {
0% {
background-color: rgb(1, 126, 188);
}
100% {
background-color: initial;
}
}
@keyframes ActionCommonColorB {
100% {
background-color: rgb(1, 126, 188);
}
}
/* 公共左边突出动作 */
@keyframes ActionMarginLeftA {
0% {
margin-left: 8px;
}
100% {
margin-left: 0px;
}
}
@keyframes ActionMarginLeftB {
100% {
margin-left: 8px;
}
}

1
public/index.html
View File

@ -12,6 +12,7 @@
<title>Mcserver 管理面板</title>
<link href="./common/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="common/css/action.css" rel="stylesheet" />
<link href="./common/css/common.css" rel="stylesheet">
<link href="./common/css/block.css" rel="stylesheet">
<link href="common/css/unit.css" rel="stylesheet" />