/*缓慢上下浮动动效*/
.restless {animation:Ani_resless .5s ease-in-out infinite alternate; }
@keyframes Ani_resless{from{transform:translate(0,-3px)} to{transform:translate(0,3px)} }


/*<!--从下往上渐渐隐藏->*/
.updanchu{
    -webkit-animation:fadeOutUp 1s .2s ease both;
    -moz-animation:fadeOutUp 1s .2s ease both;
}
@-webkit-keyframes fadeOutUp{
    0%{opacity:1;
        -webkit-transform:translateY(0)}
    100%{opacity:0;
        -webkit-transform:translateY(-20px)}
}
@-moz-keyframes fadeOutUp{
    0%{opacity:1;
        -moz-transform:translateY(0)}
    100%{opacity:0;
        -moz-transform:translateY(-20px)}
}
/*从上往下渐渐隐藏*/
.downdanchu{
    -webkit-animation:fadeOutDown 1s .2s ease both;
    -moz-animation:fadeOutDown 1s .2s ease both;}
@-webkit-keyframes fadeOutDown{
    0%{opacity:1;
        -webkit-transform:translateY(0)}
    100%{opacity:0;
        -webkit-transform:translateY(20px)}
}
@-moz-keyframes fadeOutDown{
    0%{opacity:1;
        -moz-transform:translateY(0)}
    100%{opacity:0;
        -moz-transform:translateY(20px)}
}

/*从上往下渐渐显示出来*/
.downdanru{
    -webkit-animation:fadeInDown 1s .2s ease both;
    -moz-animation:fadeInDown 1s .2s ease both;}
@-webkit-keyframes fadeInDown{
    0%{opacity:0;
        -webkit-transform:translateY(-20px)}
    100%{opacity:1;
        -webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInDown{
    0%{opacity:0;
        -moz-transform:translateY(-20px)}
    100%{opacity:1;
        -moz-transform:translateY(0)}
}
/*从下往上淡入*/
.updanru{
    -webkit-animation:fadeInUp 1s .2s ease both;
    -moz-animation:fadeInUp 1s .2s ease both;}
@-webkit-keyframes fadeInUp{
    0%{opacity:0;
        -webkit-transform:translateY(20px)}
    100%{opacity:1;
        -webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInUp{
    0%{opacity:0;
        -moz-transform:translateY(20px)}
    100%{opacity:1;
        -moz-transform:translateY(0)}
}


/*字滚动变颜色 start*/
.wordChangeColorGd{background: -webkit-linear-gradient(135deg, #0eaf6d, #FA3838 25%, /*#ff6ac6 25%,*/ /*#147b96 50%,*/ /*#e6d205 55%,*/ #FA3838 55%, /*#2cc4e0 60%,*/ /*#8b2ce0 80%,*/ #FA3838 95%, /*#ff6384 95%,*/ #08dfb4);
    /* 文字颜色填充设置为透明 */
    -webkit-text-fill-color: transparent;
    /* 背景裁剪，即让文字使用背景色 */
    -webkit-background-clip: text;
    /* 背景图放大一下，看着柔和一些 */
    -webkit-background-size: 200% 100%;
    /* 应用动画flowCss 12秒速度 无限循环 线性匀速动画*/
    -webkit-animation: flowCss 12s infinite linear;}
    .wordChangeColorGd:hover{
    -webkit-animation: flowCss 4s infinite linear;}
    @-webkit-keyframes flowCss {
        0% {
            /* 移动背景位置 */
            background-position: 0 0;
        }

        100% {
            background-position: -400% 0;
        }
    }
/*字滚动变颜色 end*/

/*打字效果 start*/
.printeWord{
    /* 本例12个文字(加标点符号)；有多少个文字，width就是多少个em */
    width: 12em;
    /* 加上两个动画，一个是打字动画，使用steps让字一个一个的出现，
     注意step和字数保持一致，光标动画也是同理，*/
    animation: typingWords 5s steps(12) infinite, cursor 0.5s steps(1) infinite;
    /* 要设置不允许换行，且溢出隐藏 */
    white-space: nowrap;
    overflow: hidden;
    /* 使用右边框作为打印的指针光标 */
    border-right: 1px solid #000;
}
@keyframes typingWords {
    0% {
        width: 0;
    }
}
@keyframes cursor {
    50% {
        border-color: transparent;
    }
}
/*打字效果 end*/

/*背景流光效果 start*/
.bglg{
    width: 32%;
    height: 48vh;
    background: linear-gradient(-45deg, #13C397,#09f, #13C397, #09f, #13C397);
    background-size: 200% 200%;
    animation: gradient 8s ease infinite;
}
.bglg2{
    width: 32%;
    /*height: 48vh;*/
    background: linear-gradient(-45deg, rgba(225,225,225,0.4),#0A60FF, rgba(225,225,225,0.4), #0A60FF, rgba(225,225,225,0.4));
    background-size: 200% 200%;
    animation: gradient 4s ease infinite;
}
@keyframes gradient {
    0% {
        background-position: 0 12%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0 12%;
    }
}
/*背景流光效果 end*/



/*闹钟左右摇摆*/
.clockdongxiao{
    animation-name: clockdongxiao;
    transform-origin: center bottom;
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-delay: .5s;
}
@keyframes clockdongxiao
{
    0% {
        transform: rotate(0deg);
        transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    }
    10% {
        transform: rotate(-12deg);
        transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    }
    20% {
        transform: rotate(12deg);
        transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    }
    28% {
        transform: rotate(-10deg);
        transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    }
    36% {
        transform: rotate(10deg);
        transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
    }
    42% {
        transform: rotate(-8deg);
        transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
    }
    48% {
        transform: rotate(8deg);
        transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
    }
    52% {
        transform: rotate(-4deg);
        transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
    }
    56% {
        transform: rotate(4deg);
        transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
    }
    60% {
        transform: rotate(0deg);
        transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
    }
    100% {
        transform: rotate(0deg);
        transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    }
}
/*闹钟左右摇摆 end*/


/*呼吸*/
.huxi{
    animation: huxi 2s infinite;
}
@keyframes huxi{
    0% {
        transform: scale(0.80);
    }
    60% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.80);
    }
}
/*呼吸 end*/

/*呼吸圈*/
.huxiquan{
    /*background: pink;*/
    box-shadow: 0 0 0 0 rgb(241, 163, 97);
    /*height: 36px;*/
    /*width: 36px;*/
    /*border-radius: 50%;*/
    animation: huxiquan 2s infinite;
}
@keyframes huxiquan{
    0% {
        transform: scale(0.90);
        /* 注意rgba中的a的设置 */
        box-shadow: 0 0 0 0 rgba(241, 163, 97, 40%);
    }

    60% {
        transform: scale(1);
        box-shadow: 0 0 0 36px rgba(204, 73, 152, 0%);
    }

    100% {
        transform: scale(0.90);
        box-shadow: 0 0 0 0 rgba(204, 73, 152, 0%);
    }
}

.huxiquan2{
    /*background: pink;*/
    box-shadow: 0 0 0 0 rgb(204, 73, 152);
    /*height: 36px;*/
    /*width: 36px;*/
    /*border-radius: 50%;*/
    animation: huxiquan2 2s infinite;
}
@keyframes huxiquan2{
    0% {
        transform: scale(0.20);
        /* 注意rgba中的a的设置 */
        box-shadow: 0 0 0 0 rgba(204, 73, 152, 60%);
    }

    60% {
        transform: scale(1);
        box-shadow: 0 0 0 36px rgba(204, 73, 152, 0%);
    }

    100% {
        transform: scale(0.60);
        box-shadow: 0 0 0 0 rgba(204, 73, 152, 0%);
    }
}


.huxiquan3{
    /*background: pink;*/
    box-shadow: 0 0 0 0 rgba(14,110,184,10%);
    /*height: 36px;*/
    /*width: 36px;*/
    /*border-radius: 50%;*/
    animation: huxiquan3 2s infinite;
}
@keyframes huxiquan3{
    0% {
        transform: scale(0.90);
        /* 注意rgba中的a的设置 */
        box-shadow: 0 0 0 0 rgba(14,110,184, 20%);
    }

    60% {
        transform: scale(1);
        box-shadow: 0 0 0 26px rgba(14,110,184, 0%);
    }

    100% {
        transform: scale(0.90);
        box-shadow: 0 0 0 0 rgba(14,110,184, 0%);
    }
}

/*呼吸圈 end*/


/*四周线条环绕流动效果*/
.xiantiaohuanrao {
    position: relative;
    /* 超出隐藏需要加上 */
    overflow: hidden;
}
.line {
    /* 结合外层元素的相对定位 */
    position: absolute;
}

.line:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    /* 加上渐变效果，方可形成拖尾效果 */
    background: linear-gradient(90deg, transparent, orange);
    animation: animate1 8s linear infinite;
}
/* 分别控制其上下左右的定位距离，从而形成线条跟随效果 */
@keyframes animate1 {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 100%;
    }
}

.line:nth-child(2) {
    top: -100%;
    right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, transparent, red);
    animation: animate2 8s linear infinite;
    /* 注意要加上延时触发动画效果，这样线条才会依次触发 */
    animation-delay: 2s;
}
@keyframes animate2 {
    0% {
        top: -100%;
    }

    50%,
    100% {
        top: 100%;
    }
}

.line:nth-child(3) {
    bottom: 0;
    right: 0;
    width: 100%;
    background: linear-gradient(270deg, transparent, green);
    animation: animate3 8s linear infinite;
    animation-delay: 4s;
}
@keyframes animate3 {
    0% {
        right: -100%;
        height: 3px;
    }
    50%,
    100% {
        height: 2px;
        right: 100%;
    }
}

.line:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #3a86ff);
    animation: animate4 8s linear infinite;
    animation-delay: 6s;
}
@keyframes animate4 {
    0% {
        bottom: -100%;
    }

    50%,
    100% {
        bottom: 100%;
    }
}

/*
html
<div class="xiantiaohuanrao">
 <span class="line"></span>
 <span class="line"></span>
 <span class="line"></span>
 <span class="line"></span>
 <div class="content">线条环绕</div>
</div>
*/
/*四周线条环绕流动效果 end*/


/*鼠标放上去，四周划线 s*/
.sizhouhuaxian{position: relative;}
.sizhouhuaxian .css3border {position: absolute;left: 1px;top: 1px;right:  1px;bottom:  1px;z-index: 9;}
.sizhouhuaxian .border.b_t {left: 0%;right: 100%;top: -1px;height: 1px;-webkit-transition: all 440ms ease 0ms;transition: all 440ms ease 0ms;}
.sizhouhuaxian .border.b_r {top: 0%;bottom: 100%;right: -1px;width: 1px;-webkit-transition: all 440ms ease 0ms;transition: all 440ms ease 0ms;}
.sizhouhuaxian .border.b_b {left: 0%;right: 100%;bottom: -1px;height: 1px;-webkit-transition: all 440ms ease 0ms;transition: all 440ms ease 0ms;}
.sizhouhuaxian .border.b_l {top: 0%;bottom: 100%;left: -1px;width: 1px;-webkit-transition: all 440ms ease 0ms;transition: all 440ms ease 0ms;}
.sizhouhuaxian .border {position: absolute;background-color: #0E6EB8;z-index: 11;}
.sizhouhuaxian:after {content: " ";position: absolute;left: 0;top: 0;right: 0;bottom: 0;
    /*background-color: rgba(0, 0, 0, 0.6);*/z-index: 8;-webkit-transition: all 300ms ease-out 300ms;transition: all 300ms ease-out 300ms;opacity: 0;visibility: hidden;-webkit-clip-path: inset(45% 0 round 0);clip-path: inset(45% 0 round 0);}
.sizhouhuaxian:hover .border.b_t {left: -1px;right: -1px;-webkit-transition: all 440ms ease 300ms;transition: all 440ms ease 300ms;}
.sizhouhuaxian:hover .border.b_r {top: -1px;bottom: -1px;-webkit-transition: all 440ms ease 300ms;transition: all 440ms ease 300ms;}
.sizhouhuaxian:hover .border.b_b {left: -1px;right: -1px;-webkit-transition: all 440ms ease 300ms;transition: all 440ms ease 300ms;}
.sizhouhuaxian:hover .border.b_l {top: -1px;bottom: -1px;-webkit-transition: all 440ms ease 300ms;transition: all 440ms ease 300ms;}
.sizhouhuaxian:hover:after {-webkit-clip-path: inset(0 0 round 0);clip-path: inset(0 0 round 0);-webkit-transition: all 400ms ease 0ms;transition: all 400ms ease 0ms;opacity: 1;visibility: visible;}
/*配合使用，
1、在需要划线的div中加一个class="sizhouhuaxian",
2、在需要划线的div下 加：<span class="css3border"> <s class="border b_t"></s> <s class="border b_r"></s> <s class="border b_b"></s> <s class="border b_l"></s> </span>
*/
/*鼠标放上去，四周划线 e*/


/*小球转圈加载效果*/
.xiaoyuanqiujiazai {
    margin: 120px 0 0 240px;
    width: 75px;
    height: 75px;
    position: relative;
    /* transform-origin: 设置的效果搭配边框看，效果更加明显 */
    /* border: 1px solid #e9e9e9; */
}

.round {
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: rgb(241, 141, 157);
    /* 加上动画效果 */
    animation: circleRound 2.8s ease infinite;
    /* 设置旋转中心，搭配.wrap的border看 */
    transform-origin: 50% 75px;
}

/* 注意z-index层级关系，依次递减 */
.round:nth-child(1) {
    z-index: 7;
}

/* 注意动画延后animation-delay播放，依次递增 */
/* 至于小圆球则越来越小 */
.round:nth-child(2) {
    height: 12px;
    width: 12px;
    background-color: rgb(199, 136, 185);
    animation-delay: .2s;
    z-index: 6;
}

.round:nth-child(3) {
    height: 11px;
    width: 11px;
    background-color: rgb(153, 69, 223);
    animation-delay: .4s;
    z-index: 5;
}

.round:nth-child(4) {
    height: 10px;
    width: 10px;
    background-color: rgb(69, 141, 223);
    animation-delay: .6s;
    z-index: 4;
}

.round:nth-child(5) {
    height: 9px;
    width: 9px;
    background-color: rgb(69, 223, 203);
    animation-delay: .8s;
    z-index: 3;
}

.round:nth-child(6) {
    height: 8px;
    width: 8px;
    background-color: rgb(100, 223, 69);
    animation-delay: 1s;
    z-index: 2;
}
.round:nth-child(7) {
    height: 7px;
    width: 7px;
    background-color: rgb(223, 200, 69);
    animation-delay: 1.2s;
    z-index: 1;
}
@keyframes circleRound {
    to {
        transform: rotate(1turn);
    }
}
/*
html:
<div class="xiaoyuanqiujiazai">
        <div class="round"></div>
        <div class="round"></div>
        <div class="round"></div>
        <div class="round"></div>
        <div class="round"></div>
        <div class="round"></div>
        <div class="round"></div>
    </div>
*/

/*小球转圈加载效果 end*/


/*边框线渐渐显示 悬浮上左、下右 end*/
.xiantopleftdownrightshow {
    display: inline-block;
    border: none;
    color: #fff;
    cursor: pointer;
    /*margin: 12px 18px;*/
    background: rgb(201, 108, 234);
    position: relative;
}
.xiantopleftdownrightshow span {
    display: block;
    /*padding: 18px 60px*/
}

.xiantopleftdownrightshow::before,
.xiantopleftdownrightshow::after {
    content: "";
    width: 0;
    height: 2px;
    position: absolute;
    transition: all .2s linear;
    background: #fff
}

.xiantopleftdownrightshow span::before,
.xiantopleftdownrightshow span::after {
    content: "";
    width: 2px;
    height: 0;
    position: absolute;
    transition: all .2s linear;
    background: #fff
}

.xiantopleftdownrightshow:hover::before,
.xiantopleftdownrightshow:hover::after {width: 100%}
.xiantopleftdownrightshow:hover span::before,
.xiantopleftdownrightshow:hover span::after {height: 100%}


.xiantopleftdownrightshow::before,
.xiantopleftdownrightshow::after {transition-delay: .2s}
.xiantopleftdownrightshow span::before,
.xiantopleftdownrightshow span::after {transition-delay: 0s}
.xiantopleftdownrightshow::before {right: 0;top: 0}
.xiantopleftdownrightshow::after {left: 0;bottom: 0}
.xiantopleftdownrightshow span::before {left: 0;top: 0}
.xiantopleftdownrightshow span::after {right: 0;bottom: 0}


.xiantopleftdownrightshow:hover::before,
.xiantopleftdownrightshow:hover::after {transition-delay: 0s}
.xiantopleftdownrightshow:hover span::before,
.xiantopleftdownrightshow:hover span::after {transition-delay: .2s}
/*边框线渐渐显示 悬浮上左、下右 end*/


/*文字跳动效果*/
.wordTiaodong span{position:relative; top:6px; color:white;animation:change 0.3s ease infinite alternate;/*text-shadow:1px 1px 0 rgba(0,0,0,0.1), 2px 2px 2px rgba(0,0,0,0.2);*/}
.wordTiaodong span:nth-child(2){animation-delay:0.1s;}
.wordTiaodong span:nth-child(3){animation-delay:0.2s;}
.wordTiaodong span:nth-child(4){animation-delay:0.3s;}
.wordTiaodong span:nth-child(5){animation-delay:0.4s;}
.wordTiaodong span:nth-child(6){animation-delay:0.5s;}
.wordTiaodong span:nth-child(7){animation-delay:0.6s;}
.wordTiaodong span:nth-child(8){animation-delay:0.7s;}
.wordTiaodong span:nth-child(9){animation-delay:0.8s;}
.wordTiaodong span:nth-child(10){animation-delay:0.9s;}
.wordTiaodong span:nth-child(11){animation-delay:1s;}
.wordTiaodong span:nth-child(12){animation-delay:0s;}
.wordTiaodong span:nth-child(13){animation-delay:0.1s;}
.wordTiaodong span:nth-child(14){animation-delay:0.2s;}
@keyframes change{
    100%{
        top:-6px;
        /*text-shadow:1px 1px 0 rgba(0,0,0,0.2), 2px 2px 0 rgba(0,0,0,0.2);*/
    }
}
/*文字跳动效果 end*/






/*按钮悬停时的效果-按钮旁边闪现小圆圈*/
.bubbly-button {position: relative;}
.bubbly-button:before,
.bubbly-button:after {position: absolute;content: '';display: block;width: 140%;height: 100%;left: -20%;z-index: 0;
    -webkit-transition: all ease-in-out 0.5s;transition: all ease-in-out 0.5s;background-repeat: no-repeat;
}
.bubbly-button:before {display: none;top: -75%;
    background-image: radial-gradient(circle, #125fa3 20%, transparent 20%), radial-gradient(circle, transparent 20%, #125fa3 20%, transparent 30%), radial-gradient(circle, #125fa3 20%, transparent 20%), radial-gradient(circle, #125fa3 20%, transparent 20%), radial-gradient(circle, transparent 10%, #125fa3 15%, transparent 20%), radial-gradient(circle, #125fa3 20%, transparent 20%), radial-gradient(circle, #125fa3 20%, transparent 20%), radial-gradient(circle, #125fa3 20%, transparent 20%), radial-gradient(circle, #125fa3 20%, transparent 20%);
    background-size: 10% 10%,20% 20%,15% 15%,20% 20%,18% 18%,10% 10%,15% 15%,10% 10%,18% 18%;
}
.bubbly-button:after {display: none;bottom: -75%;
    background-image: radial-gradient(circle, #125fa3 20%, transparent 20%), radial-gradient(circle, #125fa3 20%, transparent 20%), radial-gradient(circle, transparent 10%, #125fa3 15%, transparent 20%), radial-gradient(circle, #125fa3 20%, transparent 20%), radial-gradient(circle, #125fa3 20%, transparent 20%), radial-gradient(circle, #125fa3 20%, transparent 20%), radial-gradient(circle, #125fa3 20%, transparent 20%);
    background-size: 15% 15%,20% 20%,18% 18%,20% 20%,15% 15%,10% 10%,20% 20%;
}
.bubbly-button:hover:before {display: block;
    -webkit-animation: topBubbles ease-in-out 0.75s infinite forwards;
    animation: topBubbles ease-in-out 0.75s infinite forwards;
}
.bubbly-button:hover:after {display: block;
    -webkit-animation: bottomBubbles ease-in-out 0.75s infinite forwards;
    animation: bottomBubbles ease-in-out 0.75s infinite forwards;
}
@-webkit-keyframes topBubbles {
    0% {
        background-position: 5% 90%,10% 90%,10% 90%,15% 90%,25% 90%,25% 90%,40% 90%,55% 90%,70% 90%;
    }
    50% {
        background-position: 0% 80%,0% 20%,10% 40%,20% 0%,30% 30%,22% 50%,50% 50%,65% 20%,90% 30%;
    }
    100% {
        background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
        background-size: 0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%;
    }
}
@keyframes topBubbles {
    0% {
        background-position: 5% 90%,10% 90%,10% 90%,15% 90%,25% 90%,25% 90%,40% 90%,55% 90%,70% 90%;
    }
    50% {
        background-position: 0% 80%,0% 20%,10% 40%,20% 0%,30% 30%,22% 50%,50% 50%,65% 20%,90% 30%;
    }
    100% {
        background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
        background-size: 0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%;
    }
}
@-webkit-keyframes bottomBubbles {
    0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
    }
    50% {
        background-position: 0% 80%,20% 80%,45% 60%,60% 100%,75% 70%,95% 60%,105% 0%;
    }
    100% {
        background-position: 0% 90%,20% 90%,45% 70%,60% 110%,75% 80%,95% 70%,110% 10%;
        background-size: 0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%;
    }
}
@keyframes bottomBubbles {
    0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
    }
    50% {
        background-position: 0% 80%,20% 80%,45% 60%,60% 100%,75% 70%,95% 60%,105% 0%;
    }
    100% {
        background-position: 0% 90%,20% 90%,45% 70%,60% 110%,75% 80%,95% 70%,110% 10%;
        background-size: 0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%;
    }
}

/*按钮悬停时的效果-按钮旁边闪现小圆圈  end*/