refine: button selection style

This commit is contained in:
Dafrok
2021-09-10 22:51:12 +08:00
committed by 神戸小鳥
parent 6433c737d7
commit cf1acb64bf
2 changed files with 24 additions and 22 deletions

View File

@@ -412,32 +412,33 @@ ul#total li .achievementtitle,
color: #3b3b3b; color: #3b3b3b;
overflow: hidden; overflow: hidden;
} }
.grade0b.selected.selected::after, .grade0b.selected::after,
.grade1b.selected.selected::after, .grade1b.selected::after,
.grade2b.selected.selected::after, .grade2b.selected::after,
.grade3b.selected.selected::after { .grade3b.selected::after {
content: ''; content: '';
position: absolute; position: absolute;
background-image: linear-gradient(to left, transparent, #fff 50%, transparent 100%); background-color:#000;
opacity: 1;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 40px; left: 0;
right: 0;
box-shadow: 0 0 10px #000;
opacity: 0; opacity: 0;
animation: blink 2s linear infinite; animation: blink 3s linear infinite;
} }
@keyframes blink { @keyframes blink {
0% { 0% {
opacity: 0; opacity: 0;
transform: translateX(-100vw); transform: translateX(-150%);
} }
50% { 50% {
opacity: .5; opacity: .2;
} }
100% { 100% {
opacity: 0; opacity: 0;
transform: translateX(80px); transform: translateX(150%);
} }
} }

View File

@@ -639,32 +639,33 @@ i {
color: #fff; color: #fff;
overflow: hidden; overflow: hidden;
} }
.grade0b.selected.selected::after, .grade0b.selected::after,
.grade1b.selected.selected::after, .grade1b.selected::after,
.grade2b.selected.selected::after, .grade2b.selected::after,
.grade3b.selected.selected::after { .grade3b.selected::after {
content: ''; content: '';
position: absolute; position: absolute;
background-image: linear-gradient(to left, transparent, #fff 50%, transparent 100%); background-color:#000;
opacity: 1;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 40px; left: 0;
right: 0;
box-shadow: 0 0 10px #000;
opacity: 0; opacity: 0;
animation: blink 2s linear infinite; animation: blink 3s linear infinite;
} }
@keyframes blink { @keyframes blink {
0% { 0% {
opacity: 0; opacity: 0;
transform: translateX(-100vw); transform: translateX(-150%);
} }
50% { 50% {
opacity: .5; opacity: .2;
} }
100% { 100% {
opacity: 0; opacity: 0;
transform: translateX(80px); transform: translateX(150%);
} }
} }