CSS样式集合

最新推荐文章于 2024-08-20 13:52:45 发布

koudandan

最新推荐文章于 2024-08-20 13:52:45 发布

阅读量114

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/koudandan/article/details/140555474

版权

一、CSS样式

1、网站公共可用样式

* { margin: 0; padding: 0; }
body { font-size: 16px; color: #3e3a39; background: #f5f5f5;overflow-x:hidden;letter-spacing: 2px;}
img { border: 0px; }
ul, ol { list-style-type: none; vertical-align: bottom; }
table { border-collapse: collapse; border-spacing: 0; }
input, textarea, select { font-size: 14px; color: #353535; outline: 0; }
textarea { resize: none; overflow: auto; }
/*h1,h2,h3,h4,h5,h6,font { font-size: 14px; }*/
a {text-decoration: none; cursor: pointer;color:#353535;}
a:hover { color:#1d6888;cursor:pointer;}
a img { transition: all .5s ease; }

.clear { float: none !important; clear: both; +line-height: 0; +font-size: 0; +height: 0; }
.hidden { display: none; visibility: visible; }
.wrap { width: 1200px; margin: 0 auto;}
.wrap1440{width: 1440px; margin: 0 auto;}
.wrap90{width: 90%; margin: 0 auto;}
.wrap95{width: 95%; margin: 0 auto;}
/*flex布局*/
.flex-center {display: flex;justify-content: center;align-items: center;}
.flex-start{display: flex;justify-content: flex-start;align-items: center;}
/*限制字数显示行数*/
.line-show1{ display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;}
.line-show2{ display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.line-show3{ display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}
.line-show4{display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden;}
.line-show5{display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;overflow: hidden;}
.line-show{display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;}
/*文字两端对齐*/
.desc-justify{text-align: justify;}


/*文字两端划线*/
.huaxian:before,.huaxian:after {content:"";width:36%;height:1px;background:#B5B5B5;display:block;/*1.首先使伪类显示方式为块级元素*/position:relative ;/*2.通过相对定位的方式控制两侧内容的位置*/}
/*3.控制左侧横线的位置*/
.huaxian:before{}
/*4.控制右侧横线的位置*/
.huaxian:after{}





/*部分适应*/
@media (max-width:1680px){
    .wrap1440{width: 1440px;}
}
@media (max-width:1580px){
    .wrap1440{width: 1440px;}
}
@media (max-width:1480px){
    .wrap1440{width: 1300px;}
}
@media (max-width:1380px){
    .wrap1440{width: 1300px;}
}

@media (max-width:1280px){
    .wrap1440{width: 1200px;}
}

二、CSS写动效

1、手机端菜单按钮变化效果点击按钮，使得按钮从三横变成叉叉

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>手机端菜单按钮变化效果 点击按钮，使得按钮从三横变成叉叉</title>
<!--    jquery官方下载地址：https://jquery.com/ -->
    <script src="jquery-1.8.3.min.js"></script>

    <style>
        /*手机端菜单按钮变化效果 点击按钮，使得按钮从三横变成叉叉 start*/
        .menuph{float:right; width:50px;height:50px;cursor:pointer;text-align: center;/* background:#ff9a18;*/padding:14px 11px;margin-top:7px;}
        .menuph .point {display: inline-block;width: 28px;height: 22px;position: relative;}
        .menuph .point:hover .navbtn,
        .menuph .point:hover .navbtn::after,
        .menuph .point:hover .navbtn::before {width: 28px;}
        .menuph .navbtn {position:absolute;top: 10px;right:0;display:inline-block;width: 21px;height: 2px;-webkit-transition:all .3s ease-out 0s;-moz-transition:all .3s ease-out 0s;-ms-transition:all .3s ease-out 0s;-o-transition:all .3s ease-out 0s;transition:all .3s ease-out 0s;background:#ff9a18;}
        .menuph .navbtn::after,
        .menuph .navbtn::before {position:absolute;right:0;display:inline-block;width: 28px;height: 2px;content:'';-webkit-transition:all .3s ease-out 0s; -moz-transition:all .3s ease-out 0s;-ms-transition:all .3s ease-out 0s;-o-transition:all .3s ease-out 0s;transition:all .3s ease-out 0s;background:#ff9a18;}
        .menuph .navbtn::after {top: -11px;}
        .menuph .navbtn::before {top: 10px;}
        .menuph .point.active .navbtn{background:transparent;}
        .menuph .point.active .navbtn::after{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform: rotate(45deg);top: 0px;}
        .menuph .point.active .navbtn::before {-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);top: 0px;}
        /*手机端菜单按钮变化效果 点击按钮，使得按钮从三横变成叉叉 end*/
    </style>

</head>

<body>

<div>
    <!--/*手机端菜单按钮变化效果 点击按钮，使得按钮从三横变成叉叉 start*/-->
    <div class="menuph" id="menuph">
        <div class="point">
            <span class="navbtn"></span>
        </div>
    </div>
    <script>
        <!--需要引入jquery文件 可以从官方网站下载jquery.js文件即可-->
        $('#menuph').click(function () {
            if($('#menuph .point').hasClass('active')){
                $('#menuph .point').removeClass('active');
            }else {
                $('#menuph .point').addClass('active');
            }
        })
    </script>
    <!--/*手机端菜单按钮变化效果 点击按钮，使得按钮从三横变成叉叉 end*/-->
</div>

</body>

</html>

2、css写动效，可直接将对应class或ID，赋值给对应的块

/*缓慢上下浮动动效*/
.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*/


/*鼠标悬浮，按钮从左往右出现背景色 start*/
.btn_left_right{
    /*background-color: #2a71b9;*/
    text-transform: uppercase;letter-spacing: 0.08em;border-radius: 0;position: relative;border: none;
    -webkit-transition: all 240ms linear 0ms;-khtml-transition: all 240ms linear 0ms;-moz-transition: all 240ms linear 0ms;-ms-transition: all 240ms linear 0ms;-o-transition: all 240ms linear 0ms;transition: all 240ms linear 0ms;-webkit-border-radius: 0;-khtml-border-radius: 0;-moz-border-radius: 0;-ms-border-radius: 0;-o-border-radius: 0;
    z-index: 1;display: -webkit-inline-flex;display: -moz-inline-box;display: -ms-inline-flexbox;display: inline-flex;justify-content: center;align-items: center;max-width: 100%;cursor: pointer;-webkit-font-smoothing: antialiased;font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;overflow: hidden;flex: none;}
.btn_left_right:after{
    background-color: #959899;
    content: '';position: absolute;height: 100%;top: 0;left: 0;right: -1px;margin: auto;
    transform-origin: right center;-webkit-transform-origin: right center;-webkit-transform: scale(0, 1);-khtml-transform: scale(0, 1);-moz-transform: scale(0, 1);-ms-transform: scale(0, 1);-o-transform: scale(0, 1);transform: scale(0, 1);-webkit-transition: transform 0.3s cubic-bezier(0.37, 0.31, 0.2, 0.85);-khtml-transition: transform 0.3s cubic-bezier(0.37, 0.31, 0.2, 0.85);-moz-transition: transform 0.3s cubic-bezier(0.37, 0.31, 0.2, 0.85);-ms-transition: transform 0.3s cubic-bezier(0.37, 0.31, 0.2, 0.85);-o-transition: transform 0.3s cubic-bezier(0.37, 0.31, 0.2, 0.85);transition: transform 0.3s cubic-bezier(0.37, 0.31, 0.2, 0.85);z-index: -1;}
.btn_left_right:hover:after{transform-origin: left center;-webkit-transform-origin: left center;-webkit-transform: scale(1, 1);-khtml-transform: scale(1, 1);-moz-transform: scale(1, 1);-ms-transform: scale(1, 1);-o-transform: scale(1, 1);transform: scale(1, 1);}
/*鼠标悬浮，按钮从左往右出现背景色 start*/