/* LOGO浮动 */
div.logo {
    -webkit-animation: float 2s infinite ease-in-out;
            animation: float 2s infinite ease-in-out;
}

@-webkit-keyframes float {

    /* logo 浮动 */
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes float {

    /* logo 浮动 */
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }

    100% {
        transform: translateY(0);
    }
}

/* 标题渐变流光 */
h1 {
    background: -webkit-linear-gradient(135deg,
            #E1D89F,
            #e2d687 25%,
            #E1D89F 50%,
            #f5d16d 55%,
            #E1D89F 60%,
            #dbcd6d 80%,
            #E1D89F 95%,
            #E1D89F);
    /* 文字颜色填充设置为透明 */
    -webkit-text-fill-color: transparent;
    /* 背景裁剪，即让文字使用背景色 */
    -webkit-background-clip: text;
            background-clip: text;
    /* 背景图放大一下，看着柔和一些 */
    background-size: 200% 100%;
    /* 应用动画flowCss 12秒速度 无限循环 线性匀速动画*/
    -webkit-animation: flowCss 12s infinite linear;
            animation: flowCss 12s infinite linear;
}

h1:hover {
    /* 鼠标悬停增快 */
    -webkit-animation: flowCss 4s infinite linear;
            animation: flowCss 4s infinite linear;
}

@-webkit-keyframes flowCss {

    /* 移动背景位置 */
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -400% 0;
    }
}

@keyframes flowCss {

    /* 移动背景位置 */
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -400% 0;
    }
}