50% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.3;
}
75% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.5;
}
100% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0.0;
}
}
.container {
position: relative;
width: 96px;
height: 96px;
/*border: 1px solid #000; hovertree.com */
}
/* 保持大小不变的小圆圈 何问起 */
.dot {
position: absolute;
width: 92px;
height: 92px;
//left: -2.5px;
//top: -2.5px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
//border: 2px solid red;
border-radius: 50%;
z-index: 2;
animation: msClock 1.8s linear infinite;
}
@keyframes msClock{
0%,90%,100%{ transform: rotate(0) scale(1);}
20%,40%{ transform: rotate(-15deg) scale(1.1);}
30%,50%{ transform: rotate(15deg) scale(1.1);}
}
/* 产生动画（向外扩散变大）的圆圈 */
.pulse {
position: absolute;
width: 320px;
height: 320px;
left: -120px;
top: -120px;
border: 6px solid $dating-color-primary;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn 2s ease-out;
-moz-animation: warn 2s ease-out;
animation: warn 2s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
box-shadow: 1px 1px 30px $dating-color-primary;
}
.pulse1 {
position: absolute;
width: 320px;
height: 320px;
left: -120px;
top: -120px;
border: 6px solid $dating-color-primary;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn1 2s ease-out;
-moz-animation: warn1 2s ease-out;
animation: warn1 2s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
box-shadow: 1px 1px 30px $dating-color-primary;
}
a{color:blue;text-decoration:none;}
.match-button{
position: fixed;
bottom: calc(var(--status-bar-height) + 120rpx);
}
.prize-flying{
z-index:99;
width:100px;
position:absolute;
bottom:50%;
left:50%;
-webkit-transform:translateX(-50%);
transform:translateX(-50%)
}
.prize-flying .fly-prize {
text-align:center;
position:absolute;
top:100%;