@mixin inline-block {
    display: inline-block;
}
@mixin border-radius($radius) {
    border-radius: $radius;
}



//中性色
$M1:#36434D;
$M2:#66757F;
$M3:#ACB7BF;
$M4:#E4EBF0;
$M5:#F5F8FA;
$M6:#ffffff;
// 动画
//时间曲线
$Ease:cubic-bezier(.25,.1,.25,1);
$Spring:cubic-bezier(.66,1.65,.23,.87);
$Spring2:cubic-bezier(.44,1.53,.32,.92);
$Linear:linear;
//引用关键帧动效
@mixin AniQuote($AniInfo){
    -webkit-animation:$AniInfo;
    -moz-animation:$AniInfo;
    -ms-animation:$AniInfo;
    -o-animation:$AniInfo;
    animation:$AniInfo;
}

// 字体放大大
@-webkit-keyframes fontScale {
    from{-webkit-transform:scale(1);color:$M6;}
    to{-webkit-transform:scale(1.5);color:transparent;}
}

@-moz-keyframes fontScale {
    from{-moz-transform:scale(1);color:$M6;}
    to{-moz-transform:scale(1.5);color:transparent;}
}

@-ms-keyframes fontScale {
    from{-ms-transform:scale(1);color:$M6;}
    to{-ms-transform:scale(1.5);color:transparent;}
}

@-o-keyframes fontScale {
    from{-o-transform:scale(1);color:$M6;}
    to{-o-transform:scale(1.5);color:transparent;}
}

@keyframes fontScale {
    from{transform:scale(1);color:$M6;}
    to{transform:scale(1.5);color:transparent;}
}


// 文字向上淡入淡出


@-webkit-keyframes fontTopFade {
   0% {
        opacity: 0;
        top: -0px;
        transform: scale(1);
    }
    20% {
        opacity: 0.6;
        top: -10px;
        transform: scale(1);
    }
    40% {
        opacity: 0.8;
        top: -20px;
        transform: scale(1.5);
    }
    60% {
        opacity: 1;
        top: -20px;
        transform: scale(1.5);
    }
    
    80% {
        opacity: 1;
        top: -20px;
        transform: scale(1.5);
    }
    100% {
        opacity: 0.5;
        top: -20px;
        transform: scale(1.2);
    }
}
@-ms-keyframes fontTopFade {
    0% {
        opacity: 0;
        top: -0px;
        transform: scale(1);
    }
    20% {
        opacity: 0.6;
        top: -10px;
        transform: scale(1);
    }
    40% {
        opacity: 0.8;
        top: -20px;
        transform: scale(1.5);
    }
    60% {
        opacity: 1;
        top: -20px;
        transform: scale(1.5);
    }
    
    80% {
        opacity: 1;
        top: -20px;
        transform: scale(1.5);
    }
    100% {
        opacity: 0.5;
        top: -20px;
        transform: scale(1.2);
    }
}
@-moz-keyframes fontTopFade {
    0% {
        opacity: 0;
        top: -0px;
        transform: scale(1);
    }
    20% {
        opacity: 0.6;
        top: -10px;
        transform: scale(1);
    }
    40% {
        opacity: 0.8;
        top: -20px;
        transform: scale(1.5);
    }
    60% {
        opacity: 1;
        top: -20px;
        transform: scale(1.5);
    }
    
    80% {
        opacity: 1;
        top: -20px;
        transform: scale(1.5);
    }
    100% {
        opacity: 0.5;
        top: -20px;
        transform: scale(1.2);
    }
}
@-o-keyframes fontTopFade {
    0% {
        opacity: 0;
        top: -0px;
        transform: scale(1);
    }
    20% {
        opacity: 0.6;
        top: -10px;
        transform: scale(1);
    }
    40% {
        opacity: 0.8;
        top: -20px;
        transform: scale(1.5);
    }
    60% {
        opacity: 1;
        top: -20px;
        transform: scale(1.5);
    }
    
    80% {
        opacity: 1;
        top: -20px;
        transform: scale(1.5);
    }
    100% {
        opacity: 0.5;
        top: -20px;
        transform: scale(1.2);
    }
}
@keyframes fontTopFade {
    0% {
        opacity: 0;
        top: -0px;
        transform: scale(1);
    }
    20% {
        opacity: 0.6;
        top: -10px;
        transform: scale(1);
    }
    40% {
        opacity: 0.8;
        top: -20px;
        transform: scale(1.5);
    }
    60% {
        opacity: 1;
        top: -20px;
        transform: scale(1.5);
    }
    
    80% {
        opacity: 1;
        top: -20px;
        transform: scale(1.5);
    }
    100% {
        opacity: 0.5;
        top: -20px;
        transform: scale(1.2);
    }
}