.as-box {
position: relative;
display: inline-block;
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.as-box::after {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.as-box:hover {
transform: scale(1.25, 1.25);
text-decoration: none
}
.as-box:hover::after {
opacity: 1;
}
.as-circle > .image-clip {
border-radius: 50px;
background: #fff;
}
.as-circle {
max-width: 100px;
max-height: 100px;
border-radius: 50%;
}
.as-circle:after {
content: '';
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
}
.as-circle.Ava:hover:after {
animation: circle1 1.3s cubic-bezier(0.51, 0.78, 0.32, 1.34) 50ms
}
@keyframes circle1 {
0% {
opacity: 0.4;
box-shadow: 0 0 0 1px #9AC8E2;
}
20% {
opacity: 0.5;
box-shadow: 0 0 6px 3px #9AC8E2;
}
40% {
opacity: 0.6;
box-shadow: 0 0 12px 3px #9AC8E2;
}
60% {
box-shadow: 0 0 8px 5px #9AC8E2;
transform: scale(1.15);
opacity: 0.5;
}
100% {
box-shadow: 0 0 10px 3px #9AC8E2;
transform: scale(1.7);
opacity: 0;
}
}
.as-circle.Bella:hover:after {
animation: circle2 1.3s cubic-bezier(0.51, 0.78, 0.32, 1.34)50ms
}
@keyframes circle2 {
0% {
opacity: 0.4;
box-shadow: 0 0 0 1px #DB7F74;
}
20% {
opacity: 0.5;
box-shadow: 0 0 6px 3px #DB7F74;
}
40% {
opacity: 0.6;
box-shadow: 0 0 12px 3px #DB7F74;
}
60% {
box-shadow: 0 0 8px 5px #DB7F74;
transform: scale(1.15);
opacity: 0.5;
}
100% {
box-shadow: 0 0 10px 3px #DB7F74;
transform: scale(1.7);
opacity: 0;
}
}
.as-circle.Carol:hover:after {
animation: circle3 1.3s cubic-bezier(0.51, 0.78, 0.32, 1.34)50ms
}
@keyframes circle3 {
0% {
opacity: 0.4;
box-shadow: 0 0 0 1px #B8A6D9;
}
20% {
opacity: 0.5;
box-shadow: 0 0 6px 3px #B8A6D9;
}
40% {
opacity: 0.6;
box-shadow: 0 0 12px 3px #B8A6D9;
}
60% {
box-shadow: 0 0 8px 5px #B8A6D9;
transform: scale(1.15);
opacity: 0.5;
}
100% {
box-shadow: 0 0 10px 3px #B8A6D9;
transform: scale(1.7);
opacity: 0;
}
}
.as-circle.Diana:hover:after {
animation: circle4 1.3s cubic-bezier(0.51, 0.78, 0.32, 1.34) 50ms
}
@keyframes circle4 {
0% {
opacity: 0.4;
box-shadow: 0 0 0 1px #E799B0;
}
20% {
opacity: 0.5;
box-shadow: 0 0 6px 3px #E799B0;
}
40% {
opacity: 0.6;
box-shadow: 0 0 12px 3px #E799B0;
}
60% {
box-shadow: 0 0 8px 5px #E799B0;
transform: scale(1.15);
opacity: 0.5;
}
100% {
box-shadow: 0 0 10px 3px #E799B0;
transform: scale(1.7);
opacity: 0;
}
}
.as-circle.Eileen:hover:after {
animation: circle5 1.3s cubic-bezier(0.51, 0.78, 0.32, 1.34) 50ms
}
@keyframes circle5 {
0% {
opacity: 0.4;
box-shadow: 0 0 0 1px #576690;
}
20% {
opacity: 0.5;
box-shadow: 0 0 6px 3px #576690;
}
40% {
opacity: 0.6;
box-shadow: 0 0 12px 3px #576690;
}
60% {
box-shadow: 0 0 8px 5px #576690;
transform: scale(1.15);
opacity: 0.5;
}
100% {
box-shadow: 0 0 10px 3px #576690;
transform: scale(1.7);
opacity: 0;
}
}
/*mzh*/
@media (max-width: 576px) {
.as-box {
height: 4.5rem;
}
.as-box>div.image-clip {
width: 4.5rem !important;
height: 4.5rem !important;
}
.as-box img {
width: 4.5rem !important;
}
}
.navbox-list {
line-height: 1.7 !important;
}
/* [[Category:在模板名字空间下的CSS页面]] */