(创建页面,内容为“.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,…”) |
Chiyansama(留言 | 贡献) (// Edit via Wikiplus) |
||
第56行: | 第56行: | ||
} |
} |
||
.character-name-anime { |
.character-name-anime { |
||
font-size: 0. |
font-size: 0.72em; |
||
font-family: var(--fonts-sans); |
font-family: var(--fonts-sans); |
||
word-break: keep-all; |
word-break: keep-all; |
2023年7月31日 (一) 18:02的版本
.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;
}
.c-avatar a img {
height: 4em;
width: 4em;
margin-right: 1em;
transition: all .2s;
border-radius: 1em 0 0 1em;
transform: translateX(0);
/*-webkit-mask: radial-gradient(black 50%, transparent 100%); 图片边缘柔滑效果 不加-webkit-不生效 加了不被模板样式支持 等过几年再看吧*/
mask: radial-gradient(black 30%, transparent 74%);
}
.character:hover .c-avatar a img {
height: 6em;
width: 6em;
transition: all .2s;
/*-webkit-mask: radial-gradient(black 30%, transparent 74%);*/
mask: radial-gradient(black 30%, transparent 74%);
}
.character-name-comic {
font-size: 1.2em;
font-family: var(--fonts-sans);
word-break: keep-all;
opacity: 1;
z-index: 2;
}
.character-name-anime {
font-size: 0.72em;
font-family: var(--fonts-sans);
word-break: keep-all;
opacity: 1;
z-index: 2;
}
.character-bg {
z-index:8;
position:absolute;
margin-left: 65px;
opacity: 0;
height: 4em;
}
@media screen and (max-width: 768px) {
.characters-list{
font-size:0.8em;
grid-template-columns: repeat(auto-fill, 11em);
}
.character {
width:9.5em;
}
.character:hover .c-avatar a img{
transform: translateX(2em);
}
.character:hover .character-name-comic{
opacity: 0;
}
.character:hover .character-name-anime{
opacity: 0;
}
.character-bg {
margin-left: 0;
}
.character-name-anime{
font-size: 0.7em;
}
}