.witchspring-icon {
display: inline-block;
margin: 2px 4px;
width: 70px;
height: 70px;
position: relative;
perspective: 160px;
}
.witchspring-icon-rotate {
height: 100%;
transition: transform 1s;
}
.witchspring-icon:hover .witchspring-icon-rotate {
transform: rotateY(180deg);
}
.witchspring-icon img {
width: 100%;
height: 100%;
box-sizing: border-box;
background-color: #fff;
border-radius: 50%;
border: 2px dashed;
}
.witchspring-icon-current img {
border-style: solid;
}
.witchspring-icon-text {
position: absolute;
top: 2px;
right: 2px;
bottom: 2px;
left: 2px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
opacity: 0;
border-radius: 50%;
background-color: rgba(255, 255, 255, .5);
transition: opacity 1s, transform 1s;
}
.witchspring-icon:hover .witchspring-icon-text {
opacity: 1;
transform: rotateY(-180deg);
}
.witchspring-icon-pieberry,
.witchspring-icon-luna,
.witchspring-icon-eirudy,
.witchspring-icon-moccamori {
width: 90px;
height: 90px;
font-size: 16px;
}
.witchspring-icon-pieberry img {
border-color: #FFB6C1;
box-shadow: 0 0 8px #FFB6C1;
}
.witchspring-icon-luna img {
border-color: #87CEFA;
box-shadow: 0 0 8px #87CEFA;
}
.witchspring-icon-eirudy img {
border-color: #30D5C8;
box-shadow: 0 0 8px #30D5C8;
}
.witchspring-icon-moccamori img {
border-color: #cfbfa4;
box-shadow: 0 0 8px #cfbfa4;
}
.witchspring-icon-other img {
border-color: #888;
box-shadow: 0 0 8px #888;
}
/* [[Category:在模板名字空间下的CSS页面]] */