Template:角色信息按键/style.css

/* comic */
.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;
	transform: translateX(0);
	/*-webkit-mask: radial-gradient(black 50%, transparent 100%); 图片边缘柔滑效果 不加-webkit-不生效 加了不被模板样式支持 等过几年再看吧*/
	mask: radial-gradient(black 30%, transparent 74%);
}

.character:hover .character-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-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, 12em);
	}
    .character {
    	width:11em;
    }
	.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;
	}

}
@media screen and (max-width: 370px) {
	.characters-list{
		font-size:0.8em;
		grid-template-columns: repeat(auto-fill, 10em);
	}
    .character {
    	width:10em;
    }


}