(// Edit via Wikiplus) |
小 (停用无法感知的属性动画) |
||
(未显示2个用户的11个中间版本) | |||
第28行: | 第28行: | ||
border-color: #4096ff; |
border-color: #4096ff; |
||
box-shadow: 0 2px 0 rgba(64, 150, 255, .02); |
box-shadow: 0 2px 0 rgba(64, 150, 255, .02); |
||
⚫ | |||
} |
} |
||
.character-avatar-anime |
.character-avatar-anime, |
||
.character-avatar-comic |
.character-avatar-comic { |
||
⚫ | |||
} |
|||
⚫ | |||
.character-avatar-comic img { |
|||
height: 4em; |
height: 4em; |
||
width: 4em; |
width: 4em; |
||
margin-right: 1em; |
margin-right: 1em; |
||
⚫ | |||
border-radius: 1em 0 0 1em; |
border-radius: 1em 0 0 1em; |
||
transition-property: height, width; |
|||
⚫ | |||
} |
} |
||
.character:hover .character-avatar-anime |
.character:hover .character-avatar-anime img, |
||
.character:hover .character-avatar-comic |
.character:hover .character-avatar-comic img { |
||
height: 6em; |
height: 6em; |
||
width: 6em; |
width: 6em; |
||
⚫ | |||
} |
} |
||
第50行: | 第54行: | ||
.character-name-comic { |
.character-name-comic { |
||
font-family: var(--fonts-sans); |
font-family: var(--fonts-sans); |
||
white-space: nowrap; |
|||
opacity: 1; |
opacity: 1; |
||
transition: opacity .2s; |
transition: opacity .2s; |
||
第57行: | 第61行: | ||
.character-name-anime { |
.character-name-anime { |
||
font-size: 0.8em; |
font-size: 0.8em; |
||
⚫ | |||
} |
} |
||
.character-name-comic { |
.character-name-comic { |
||
font-size: 1.2em; |
font-size: 1.2em; |
||
} |
|||
.character-name-anime .character-name-comic { |
|||
⚫ | |||
} |
} |
||
第70行: | 第79行: | ||
margin-left: 0; |
margin-left: 0; |
||
height: 4em; |
height: 4em; |
||
} |
|||
.character-bg a{ |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
} |
||
第80行: | 第94行: | ||
.character { |
.character { |
||
width: 11em; |
width: 11em; |
||
⚫ | |||
.character-bg { |
|||
width: 11em; |
|||
} |
} |
||
.character:hover .character-avatar |
.character:hover .character-avatar-comic, |
||
.character:hover .character-avatar-anime { |
|||
transform: translateX(2em); |
transform: translateX(2em); |
||
} |
} |
||
.character:hover .character-name-comic |
.character:hover .character-name-comic, |
||
opacity: 0; |
|||
transition: opacity .2s; |
|||
⚫ | |||
.character:hover .character-name-anime { |
.character:hover .character-name-anime { |
||
opacity: 0; |
opacity: 0; |
||
transition: opacity .2s; |
|||
} |
} |
||
.character-avatar-anime |
/* .character-avatar-anime img { |
||
height: 2.4em; |
height: 2.4em; |
||
width: 2.4em; |
width: 2.4em; |
||
} |
} */ |
||
⚫ | |||
⚫ | |||
⚫ | |||
transform: translateX(2em); |
|||
⚫ | |||
} |
} |
||
第117行: | 第126行: | ||
.character { |
.character { |
||
width: 10em; |
width: 10em; |
||
⚫ | |||
.character-bg { |
|||
width: 10em; |
|||
} |
} |
||
} |
} |
2024年5月18日 (六) 07:07的最新版本
.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);
}
.character-avatar-anime,
.character-avatar-comic {
transition: transform .2s;
}
.character-avatar-anime img,
.character-avatar-comic img {
height: 4em;
width: 4em;
margin-right: 1em;
border-radius: 1em 0 0 1em;
transition-property: height, width;
transition-duration: .2s;
}
.character:hover .character-avatar-anime img,
.character:hover .character-avatar-comic img {
height: 6em;
width: 6em;
}
.character-name-anime,
.character-name-comic {
font-family: var(--fonts-sans);
white-space: nowrap;
opacity: 1;
transition: opacity .2s;
}
.character-name-anime {
font-size: 0.8em;
line-height: 2em;
}
.character-name-comic {
font-size: 1.2em;
}
.character-name-anime .character-name-comic {
font-size: 1.5em;
}
.character-bg {
width: 12em;
z-index: 2;
position: absolute;
opacity: 0;
margin-left: 0;
height: 4em;
}
.character-bg a{
display: block;
width: 100%;
height: 100%;
}
@media screen and (max-width: 768px) {
.characters-list {
font-size: 0.8em;
grid-template-columns: repeat(auto-fill, 12em);
}
.character {
width: 11em;
}
.character-bg {
width: 11em;
}
.character:hover .character-avatar-comic,
.character:hover .character-avatar-anime {
transform: translateX(2em);
}
.character:hover .character-name-comic,
.character:hover .character-name-anime {
opacity: 0;
}
/* .character-avatar-anime img {
height: 2.4em;
width: 2.4em;
} */
}
@media screen and (max-width: 370px) {
.characters-list {
font-size: 0.8em;
grid-template-columns: repeat(auto-fill, 10em);
}
.character {
width: 10em;
}
.character-bg {
width: 10em;
}
}