(// Edit via Wikiplus 修复移动端的动画问题) |
(// Edit via Wikiplus 合并两种按钮使用的css样式) |
||
第1行: | 第1行: | ||
/* comic */ |
|||
.characters-list { |
.characters-list { |
||
display: grid; |
display: grid; |
||
grid-template-columns: repeat(auto-fill, 13em); |
grid-template-columns: repeat(auto-fill, 13em); |
||
grid-template-rows: auto; |
grid-template-rows: auto; |
||
justify-content: space-between; |
|||
justify-items: center; |
justify-items: center; |
||
} |
} |
||
.characters-list p{ |
.characters-list p { |
||
display: none; |
display: none; |
||
} |
} |
||
.character { |
.character { |
||
display: flex; |
display: flex; |
||
第36行: | 第38行: | ||
transition: all .2s; |
transition: all .2s; |
||
border-radius: 1em 0 0 1em; |
border-radius: 1em 0 0 1em; |
||
⚫ | |||
/*-webkit-mask: radial-gradient(black 50%, transparent 100%); 图片边缘柔滑效果 不加-webkit-不生效 加了不被模板样式支持 等过几年再看吧*/ |
|||
mask: radial-gradient(black 30%, transparent 74%); |
|||
} |
} |
||
第45行: | 第44行: | ||
width: 6em; |
width: 6em; |
||
transition: all .2s; |
transition: all .2s; |
||
/*-webkit-mask: radial-gradient(black 30%, transparent 74%);*/ |
|||
mask: radial-gradient(black 30%, transparent 74%); |
|||
} |
} |
||
第55行: | 第52行: | ||
opacity: 1; |
opacity: 1; |
||
z-index: 2; |
z-index: 2; |
||
transition: opacity .2s; |
|||
⚫ | |||
⚫ | |||
font-size: 0.7em; |
|||
font-family: var(--fonts-sans); |
|||
word-break: keep-all; |
|||
⚫ | |||
⚫ | |||
transition: opacity .2s; |
|||
} |
} |
||
.character-bg { |
.character-bg { |
||
⚫ | |||
⚫ | |||
z-index: 2; |
|||
position: absolute; |
|||
⚫ | |||
opacity: 0; |
|||
⚫ | |||
height: 4em; |
|||
} |
} |
||
@media screen and (max-width: 768px) { |
@media screen and (max-width: 768px) { |
||
.characters-list { |
|||
font-size: 0.8em; |
|||
grid-template-columns: repeat(auto-fill, 12em); |
|||
} |
|||
⚫ | |||
.character { |
.character { |
||
width: 11em; |
|||
} |
} |
||
⚫ | |||
⚫ | |||
} |
|||
⚫ | |||
⚫ | |||
} |
|||
⚫ | |||
⚫ | |||
} |
|||
⚫ | |||
margin-left: 0; |
|||
} |
|||
⚫ | |||
⚫ | |||
} |
|||
⚫ | |||
⚫ | |||
transition: opacity .2s; |
|||
} |
|||
⚫ | |||
opacity: 0; |
|||
transition: opacity .2s; |
|||
} |
|||
⚫ | |||
height: 2.4em; |
|||
width: 2.4em; |
|||
} |
|||
.character:hover .character-avatar-anime a img { |
|||
height: 5em; |
|||
width: 5em; |
|||
⚫ | |||
} |
|||
} |
} |
||
@media screen and (max-width: 370px) { |
@media screen and (max-width: 370px) { |
||
.characters-list { |
|||
font-size: 0.8em; |
|||
grid-template-columns: repeat(auto-fill, 10em); |
|||
} |
|||
⚫ | |||
⚫ | |||
} |
} |
||
.character { |
|||
width: 10em; |
|||
} |
|||
} |
} |
2023年8月25日 (五) 16:04的版本
.characters-list {
display: grid;
grid-template-columns: repeat(auto-fill, 13em);
grid-template-rows: auto;
justify-content: space-between;
justify-items: center;
}
.characters-list p {
display: none;
}
.character {
display: flex;
height: 4em;
width: 12em;
align-items: center;
border: 1px #d9d9d9 solid;
border-radius: 1em;
background-color: rgba(255, 255, 255, .5);
margin: 1em;
box-shadow: 0 2px 0 rgba(0, 0, 0, .02);
transition: border-color .2s;
overflow: hidden;
}
.character:hover {
border-color: #4096ff;
box-shadow: 0 2px 0 rgba(64, 150, 255, .02);
transition: all .2s;
}
.character-avatar a img {
height: 4em;
width: 4em;
margin-right: 1em;
transition: all .2s;
border-radius: 1em 0 0 1em;
}
.character:hover .character-avatar a img {
height: 6em;
width: 6em;
transition: all .2s;
}
.character-name-comic {
font-size: 1.2em;
font-family: var(--fonts-sans);
word-break: keep-all;
opacity: 1;
z-index: 2;
transition: opacity .2s;
}
.character-name-anime {
font-size: 0.7em;
font-family: var(--fonts-sans);
word-break: keep-all;
opacity: 1;
z-index: 2;
transition: opacity .2s;
}
.character-bg {
width: 12em;
z-index: 2;
position: absolute;
opacity: 0;
margin-left: 0;
height: 4em;
}
@media screen and (max-width: 768px) {
.characters-list {
font-size: 0.8em;
grid-template-columns: repeat(auto-fill, 12em);
}
.character {
width: 11em;
}
.character:hover .character-avatar a img {
transform: translateX(2em);
}
.character:hover .character-name-comic {
opacity: 0;
transition: opacity .2s;
}
.character:hover .character-name-anime {
opacity: 0;
transition: opacity .2s;
}
.character-avatar-anime a img {
height: 2.4em;
width: 2.4em;
}
.character:hover .character-avatar-anime a img {
height: 5em;
width: 5em;
transform: translateX(2em);
}
}
@media screen and (max-width: 370px) {
.characters-list {
font-size: 0.8em;
grid-template-columns: repeat(auto-fill, 10em);
}
.character {
width: 10em;
}
}