zoukankan      html  css  js  c++  java
  • 渐变banner

    <div class="bannerTop" style="z-index:-9;">
    </div>

    #indextype{
    display:none !important;
    }
    .bannerTop{
    100%;
    min-1920px;
    height:260px;
    background: linear-gradient(to right, #c04848, #480048);

    position: relative;
    animation: colorswitch 20s infinite;
    /* Firefox */
    -moz-animation: colorswitch 20s infinite;
    /* Safari and Chrome */
    -webkit-animation: colorswitch 20s infinite;
    /* Opera */
    -o-animation: colorswitch 20s infinite;
    }
    @keyframes colorswitch {
    0% {
    background: #0087C9
    }

    16% {
    background: #EF4A53
    }

    32% {
    background: #FFB463
    }

    49% {
    background: #33D5D4
    }

    65% {
    background: #254356
    }

    81% {
    background: #5B4097
    }

    100% {
    background: #0087C9
    }
    }

    /* Firefox */
    @-moz-keyframes colorswitch {
    0% {
    background: #0087C9
    }

    16% {
    background: #EF4A53
    }

    32% {
    background: #FFB463
    }

    49% {
    background: #33D5D4
    }

    65% {
    background: #254356
    }

    81% {
    background: #5B4097
    }

    100% {
    background: #0087C9
    }
    }

    /* Safari and Chrome */
    @-webkit-keyframes colorswitch {
    0% {
    background: #0087C9
    }

    16% {
    background: #EF4A53
    }

    32% {
    background: #FFB463
    }

    49% {
    background: #33D5D4
    }

    65% {
    background: #254356
    }

    81% {
    background: #5B4097
    }

    100% {
    background: #0087C9
    }
    }

    /* Opera */
    @-o-keyframes colorswitch {
    0% {
    background: #0087C9
    }

    16% {
    background: #EF4A53
    }

    32% {
    background: #FFB463
    }

    49% {
    background: #33D5D4
    }

    65% {
    background: #254356
    }

    81% {
    background: #5B4097
    }

    100% {
    background: #0087C9
    }
    }

  • 相关阅读:
    第一阶段SCRUM冲刺day07
    第一阶段SCRUM冲刺day06
    第一阶段SCRUM冲刺day05
    第一阶段SCRUM冲刺day04
    2020年第七周学习进度
    第一阶段SCRUM冲刺day03
    第一阶段SCRUM冲刺day02
    团队会议01
    2020年第六周学习进度
    TCP/IP Socket 的理解
  • 原文地址:https://www.cnblogs.com/wensx/p/12176356.html
Copyright © 2011-2022 走看看