Difference between revisions of "Team:SUIS Shanghai"

 
(6 intermediate revisions by the same user not shown)
Line 2: Line 2:
  
 
<html>
 
<html>
 
<style>
 
 
    /* ################################################################################ */
 
    /*底部版权信息  开始  */
 
 
    #homefooterdiv {
 
        position: absolute;
 
        z-index: 98;
 
        width: 100%;
 
        top: 1660px;
 
    }
 
 
    #homefooterdiv:before {
 
        content: '';
 
        width: 100%;
 
        height: 10px;
 
        background-color: #2F2F7F;
 
        position: absolute;
 
    }
 
 
    div#footer1 {
 
        height: 180px;
 
        width: 100%;
 
        /*border: 5px #2F2F7F solid;*/
 
        border-width: 5px 0 0 0;
 
        background-color: #182647;
 
    }
 
 
    #footer1mid {
 
        width: 1200px;
 
        margin: auto;
 
    }
 
 
    img#whitelogo {
 
        width: 150px;
 
        float: left;
 
        margin-top: 65px;
 
        cursor: pointer;
 
    }
 
 
    #foormidword {
 
        color: white;
 
        hieght: 100%;
 
        font-size: 17px;
 
        padding: 10px 77px;
 
        float: left;
 
        margin-left: 244px;
 
        margin-top: 75px;
 
    }
 
 
    #foorrightdiv {
 
        float: right;
 
        color: white;
 
        margin-top: 62px;
 
    }
 
 
    #foorrightdiv p {
 
        text-align: right;
 
        font-size: 15px;
 
        line-height: 25px;
 
    }
 
 
    #footer2 {
 
        width: 100%;
 
        background-color: #121D33;
 
        height: 40px;
 
        text-align: center;
 
        color: white;
 
        font-size: 13px;
 
        padding-top: 12px;
 
    }
 
 
    /*底部版权信息  结束  */
 
    /* ################################################################################ */
 
 
 
 
/* ################################################################################ */
 
    /* 所有元素动画效果  开始 */
 
 
    /*animation: name duration timing-function delay iteration-count direction fill-mode play-state;*/
 
 
    /*月亮 渐渐变清晰动画*/
 
    .content .moon img {
 
        transition: all 4s ease-out;
 
        animation: mooning 4s linear infinite alternate;
 
        -webkit-animation: mooning 4s linear infinite alternate;
 
        -moz-animation: mooning 4s linear infinite alternate;
 
        -o-animation:mooning 4s linear infinite alternate;
 
    }
 
 
    /*月亮 渐渐变清晰动画 开始*/
 
    @keyframes mooning {
 
        0% {
 
            opacity: 0.5;
 
            filter: alpha(opacity=50);
 
        }
 
 
        100% {
 
            opacity: 1;
 
            filter: alpha(opacity=1);
 
        }
 
    }
 
 
    @-webkit-keyframes mooning {
 
        0% {
 
            opacity: 0.5;
 
            filter: alpha(opacity=50);
 
        }
 
 
        100% {
 
            opacity: 1;
 
            filter: alpha(opacity=1);
 
        }
 
    }
 
 
    @-moz-keyframes mooning {
 
        0% {
 
            opacity: 0.5;
 
            filter: alpha(opacity=50);
 
        }
 
 
        100% {
 
            opacity: 1;
 
            filter: alpha(opacity=1);
 
        }
 
    }
 
 
    @-o-keyframes mooning {
 
        0% {
 
            opacity: 0.5;
 
            filter: alpha(opacity=50);
 
        }
 
 
        100% {
 
            opacity: 1;
 
            filter: alpha(opacity=1);
 
        }
 
    }
 
 
    /*月亮 渐渐变清晰动画 结束*/
 
 
 
    /*鱼 鼠标放在上面动画 开始*/
 
    .fish_hover {
 
        cursor: pointer;
 
        transition: all 0.5s ease-in-out;
 
        -webkit-transition: all 0.5s ease-in-out;
 
        -moz-transition: all 0.5s ease-in-out;
 
        -o-transition: all 0.5s ease-in-out;
 
        opacity: 0.3;
 
        filter: alpha(opacity=50);
 
    }
 
 
    /*鱼 鼠标放在上面动画 结束*/
 
 
 
    /*鱼骨头文字hover 鼠标放在上面动画 开始*/
 
 
    .fish_bone_title_hover {
 
        animation: fish_bone_title 0.1s ease-in-out;
 
        animation-fill-mode: forwards;
 
 
        -webkit-animation: fish_bone_title 0.1s ease-in-out;
 
        -webkit-animation-fill-mode: forwards;
 
        -moz-animation: fish_bone_title 0.1s ease-in-out;
 
        -moz-animation-fill-mode: forwards;
 
        -o-animation: fish_bone_title 0.1s ease-in-out;
 
        -o-animation-fill-mode: forwards;
 
    }
 
 
    @keyframes fish_bone_title {
 
        from {}
 
 
        to {
 
            cursor: pointer;
 
            font-size: 22px;
 
        }
 
    }
 
 
    /*鱼骨头文字hover 鼠标放在上面动画 结束*/
 
 
 
 
    /*水波动画 开始*/
 
    .wave_back img {
 
 
        animation: wave_back 10s cubic-bezier(.55, .5, .45, .5) infinite alternate;
 
        -webkit-animation: wave_back 10s cubic-bezier(.55, .5, .45, .5) infinite alternate;
 
        -moz-animation: wave_back 10s cubic-bezier(.55, .5, .45, .5) infinite alternate;
 
        -o-animation: wave_back 10s cubic-bezier(.55, .5, .45, .5) infinite alternate;
 
 
    }
 
 
    .wave_mid img {
 
 
        animation: wave_mid 5s ease infinite alternate;
 
        -webkit-animation: wave_mid 5s ease infinite alternate;
 
        -moz-animation: wave_mid 5s ease infinite alternate;
 
        -o-animation: wave_mid 5s ease infinite alternate;
 
 
    }
 
 
    .wave_front img {
 
 
        animation: wave_front 10s ease infinite alternate;
 
        -webkit-animation: wave_front 10s ease infinite alternate;
 
        -moz-animation: wave_front 10s ease infinite alternate;
 
        -o-animation: wave_front 10s ease infinite alternate;
 
 
    }
 
 
    @keyframes wave_back {
 
        0% {
 
            transform: translate3d(0, 0, 0);
 
        }
 
 
        25% {
 
            transform: translate3d(0, 40px, 0);
 
        }
 
 
        50% {
 
            transform: translate3d(0, 60px, 0);
 
        }
 
 
        100% {
 
            transform: translate3d(0, 0px, 0);
 
        }
 
    }
 
 
    @-webkit-keyframes wave_back {
 
        0% {
 
            transform: translate3d(0, 0, 0);
 
            opacity: 0.75;
 
        }
 
 
        25% {
 
            transform: translate3d(0, 40px, 0);
 
            opacity: 1;
 
        }
 
 
        50% {
 
            transform: translate3d(0, 60px, 0);
 
            opacity: 0.75;
 
        }
 
 
        100% {
 
            transform: translate3d(0, 0px, 0);
 
            opacity: 1;
 
        }
 
    }
 
 
    @-moz-keyframes wave_back {
 
        0% {
 
            transform: translate3d(0, 0, 0);
 
            opacity: 0.75;
 
        }
 
 
        25% {
 
            transform: translate3d(0, 40px, 0);
 
            opacity: 1;
 
        }
 
 
        50% {
 
            transform: translate3d(0, 60px, 0);
 
            opacity: 0.75;
 
        }
 
 
        100% {
 
            transform: translate3d(0, 0px, 0);
 
            opacity: 1;
 
        }
 
    }
 
 
    @-o-keyframes wave_back {
 
        0% {
 
            transform: translate3d(0, 0, 0);
 
            opacity: 0.75;
 
        }
 
 
        25% {
 
            transform: translate3d(0, 40px, 0);
 
            opacity: 1;
 
        }
 
 
        50% {
 
            transform: translate3d(0, 60px, 0);
 
            opacity: 0.75;
 
        }
 
 
        100% {
 
            transform: translate3d(0, 0px, 0);
 
            opacity: 1;
 
        }
 
    }
 
 
    @keyframes wave_mid {
 
 
        0% {
 
            transform: translate3d(0, 60px, 0);
 
            opacity: 0.55;
 
        }
 
 
        25% {
 
            transform: translate3d(0, 0x, 0);
 
            opacity: 0.75;
 
        }
 
 
        50% {
 
            transform: translate3d(0, -60px, 0);
 
            opacity: 1;
 
        }
 
 
        100% {
 
            transform: translate3d(0, 0, 0);
 
            opacity: 0.75;
 
        }
 
    }
 
 
    @-webkit-keyframes wave_mid {
 
 
        0% {
 
            transform: translate3d(0, 60px, 0);
 
            opacity: 0.55;
 
        }
 
 
        25% {
 
            transform: translate3d(0, 0x, 0);
 
            opacity: 0.75;
 
        }
 
 
        50% {
 
            transform: translate3d(0, -60px, 0);
 
            opacity: 1;
 
        }
 
 
        100% {
 
            transform: translate3d(0, 0, 0);
 
            opacity: 0.75;
 
        }
 
    }
 
 
    @-moz-keyframes wave_mid {
 
 
        0% {
 
            transform: translate3d(0, 60px, 0);
 
            opacity: 0.55;
 
        }
 
 
        25% {
 
            transform: translate3d(0, 0x, 0);
 
            opacity: 0.75;
 
        }
 
 
        50% {
 
            transform: translate3d(0, -60px, 0);
 
            opacity: 1;
 
        }
 
 
        100% {
 
            transform: translate3d(0, 0, 0);
 
            opacity: 0.75;
 
        }
 
    }
 
 
    @-o-keyframes wave_mid {
 
 
        0% {
 
            transform: translate3d(0, 60px, 0);
 
            opacity: 0.55;
 
        }
 
 
        25% {
 
            transform: translate3d(0, 0x, 0);
 
            opacity: 0.75;
 
        }
 
 
        50% {
 
            transform: translate3d(0, -60px, 0);
 
            opacity: 1;
 
        }
 
 
        100% {
 
            transform: translate3d(0, 0, 0);
 
            opacity: 0.75;
 
        }
 
    }
 
 
    @keyframes wave_front {
 
 
        0% {
 
            transform: translate3d(0, 0, 0);
 
            opacity: 0.99;
 
        }
 
 
        25% {
 
            transform: translate3d(0, -80px, 0);
 
            opacity: 1;
 
        }
 
 
        50% {
 
            transform: translate3d(0, 0, 0);
 
            opacity: 0.99;
 
        }
 
 
        100% {
 
            transform: translate3d(0, -80px, 0);
 
            opacity: 1;
 
        }
 
    }
 
 
    @-webkit-keyframes wave_front {
 
 
        0% {
 
            transform: translate3d(0, 0, 0);
 
            opacity: 0.99;
 
        }
 
 
        25% {
 
            transform: translate3d(0, -80px, 0);
 
            opacity: 1;
 
        }
 
 
        50% {
 
            transform: translate3d(0, 0, 0);
 
            opacity: 0.99;
 
        }
 
 
        100% {
 
            transform: translate3d(0, -80px, 0);
 
            opacity: 1;
 
        }
 
    }
 
 
    @-moz-keyframes wave_front {
 
 
        0% {
 
            transform: translate3d(0, 0, 0);
 
            opacity: 0.99;
 
        }
 
 
        25% {
 
            transform: translate3d(0, -80px, 0);
 
            opacity: 1;
 
        }
 
 
        50% {
 
            transform: translate3d(0, 0, 0);
 
            opacity: 0.99;
 
        }
 
 
        100% {
 
            transform: translate3d(0, -80px, 0);
 
            opacity: 1;
 
        }
 
    }
 
 
    @-o-keyframes wave_front {
 
 
        0% {
 
            transform: translate3d(0, 0, 0);
 
            opacity: 0.99;
 
        }
 
 
        25% {
 
            transform: translate3d(0, -80px, 0);
 
            opacity: 1;
 
        }
 
 
        50% {
 
            transform: translate3d(0, 0, 0);
 
            opacity: 0.99;
 
        }
 
 
        100% {
 
            transform: translate3d(0, -80px, 0);
 
            opacity: 1;
 
        }
 
    }
 
 
    /*水波动画 结束*/
 
 
 
    /*水花动画 开始*/
 
    @keyframes spray1 {
 
 
        0%,
 
        100% {
 
            box-shadow: 0px 0px 20px 20px rgba(255, 255, 255, 0.25);
 
        }
 
 
        50% {
 
            box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, .75);
 
        }
 
    }
 
 
    @-webkit-keyframes spray1 {
 
 
        0%,
 
        100% {
 
            box-shadow: 0px 0px 20px 20px rgba(255, 255, 255, 0.25);
 
        }
 
 
        50% {
 
            box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, .75);
 
        }
 
    }
 
 
    @-moz-keyframes spray1 {
 
 
        0%,
 
        100% {
 
            box-shadow: 0px 0px 20px 20px rgba(255, 255, 255, 0.25);
 
        }
 
 
        50% {
 
            box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, .75);
 
        }
 
    }
 
 
    @-o-keyframes spray1 {
 
 
        0%,
 
        100% {
 
            box-shadow: 0px 0px 20px 20px rgba(255, 255, 255, 0.25);
 
        }
 
 
        50% {
 
            box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, .75);
 
        }
 
    }
 
 
 
 
    /* 水花  开始 */
 
    .spray {
 
        position: absolute;
 
        display: block;
 
        width: 10px;
 
        height: 10px;
 
        background: #d6d2d2;
 
        border-radius: 100%;
 
        transition: all .5s cubic-bezier(1, 0.005, 0, 1.2);
 
        z-index: 100;
 
    }
 
 
    .spray1 {
 
        width: 20px;
 
        height: 20px;
 
        transform: scale(.3);
 
        top: 90px;
 
        left: 316px;
 
        transition-delay: .7s;
 
        animation: spray1 5s linear infinite;
 
        -webkit-animation: spray1 5s linear infinite;
 
        -moz-animation: spray1 5s linear infinite;
 
        -o-animation: spray1 5s linear infinite;
 
        opacity: 0.8;
 
    }
 
 
    .spray2 {
 
        width: 30px;
 
        height: 30px;
 
        transform: scale(.5);
 
        top: 216px;
 
        left: 316px;
 
        transition-delay: .5s;
 
        animation: spray1 5s linear infinite;
 
        -webkit-animation: spray1 5s linear infinite;
 
        -moz-animation: spray1 5s linear infinite;
 
        -o-animation: spray1 5s linear infinite;
 
        opacity: 0.8;
 
    }
 
 
    .spray3 {
 
        width: 25px;
 
        height: 25px;
 
        transform: scale(.3);
 
        top: 372px;
 
        left: 262px;
 
        transition-delay: .5s;
 
        animation: spray1 10s linear infinite;
 
        -webkit-animation: spray1 10s linear infinite;
 
        -moz-animation: spray1 10s linear infinite;
 
        -o-animation: spray1 10s linear infinite;
 
        opacity: 0.8;
 
    }
 
 
    .spray4 {
 
        width: 15px;
 
        height: 15px;
 
        transform: scale(.3);
 
        top: 116px;
 
        left: 662px;
 
        transition-delay: .2s;
 
        animation: spray1 10s linear infinite;
 
        -webkit-animation: spray1 10s linear infinite;
 
        -moz-animation: spray1 10s linear infinite;
 
        -o-animation: spray1 10s linear infinite;
 
        opacity: 1;
 
    }
 
 
    .spray5 {
 
        width: 30px;
 
        height: 30px;
 
        transform: scale(.5);
 
        top: 190px;
 
        left: 730px;
 
        transition-delay: .2s;
 
        animation: spray1 10s linear infinite;
 
        -webkit-animation: spray1 10s linear infinite;
 
        -moz-animation: spray1 10s linear infinite;
 
        -o-animation: spray1 10s linear infinite;
 
        opacity: 0.7;
 
    }
 
 
    .spray6 {
 
        width: 10px;
 
        height: 10px;
 
        transform: scale(.5);
 
        top: 290px;
 
        left: 600px;
 
        transition-delay: .2s;
 
        animation: spray1 10s linear infinite;
 
        -webkit-animation: spray1 10s linear infinite;
 
        -moz-animation: spray1 10s linear infinite;
 
        -o-animation: spray1 10s linear infinite;
 
        opacity: 0.7;
 
    }
 
 
    .spray7 {
 
        width: 30px;
 
        height: 30px;
 
        transform: scale(.5);
 
        top: 330px;
 
        left: 570px;
 
        transition-delay: .1s;
 
        animation: spray1 10s linear infinite;
 
        -webkit-animation: spray1 10s linear infinite;
 
        -moz-animation: spray1 10s linear infinite;
 
        -o-animation: spray1 10s linear infinite;
 
        opacity: 0.9;
 
    }
 
 
    .spray8 {
 
        width: 30px;
 
        height: 30px;
 
        transform: scale(.5);
 
        top: 90px;
 
        left: 870px;
 
        transition-delay: .5s;
 
        animation: spray1 10s linear infinite;
 
        -webkit-animation: spray1 10s linear infinite;
 
        -moz-animation: spray1 10s linear infinite;
 
        -o-animation: spray1 10s linear infinite;
 
        opacity: 0.7;
 
    }
 
 
    .spray9 {
 
        width: 30px;
 
        height: 30px;
 
        transform: scale(.5);
 
        top: 158px;
 
        left: 950px;
 
        transition-delay: .2s;
 
        animation: spray1 10s linear infinite;
 
        -webkit-animation: spray1 10s linear infinite;
 
        -moz-animation: spray1 10s linear infinite;
 
        -o-animation: spray1 10s linear infinite;
 
        opacity: 0.7;
 
        z-index: 0;
 
    }
 
 
    .spray10 {
 
        width: 10px;
 
        height: 10px;
 
        transform: scale(.5);
 
        top: 348px;
 
        left: 1100px;
 
        transition-delay: .2s;
 
        animation: spray1 8s linear infinite;
 
        -webkit-animation: spray1 8s linear infinite;
 
        -moz-animation: spray1 8s linear infinite;
 
        -o-animation: spray1 8s linear infinite;
 
        opacity: 1;
 
    }
 
 
    .spray11 {
 
        width: 30px;
 
        height: 30px;
 
        transform: scale(.5);
 
        top: 118px;
 
        left: 1320px;
 
        transition-delay: .2s;
 
        animation: spray1 10s linear infinite;
 
        -webkit-animation: spray1 10s linear infinite;
 
        -moz-animation: spray1 10s linear infinite;
 
        -o-animation: spray1 10s linear infinite;
 
        opacity: 0.7;
 
    }
 
 
    .spray12 {
 
        width: 15px;
 
        height: 15px;
 
        transform: scale(.5);
 
        top: 350px;
 
        left: 1490px;
 
        transition-delay: .2s;
 
        animation: spray1 10s linear infinite;
 
        -webkit-animation: spray1 10s linear infinite;
 
        -moz-animation: spray1 10s linear infinite;
 
        -o-animation: spray1 10s linear infinite;
 
        opacity: 1;
 
    }
 
 
    .spray13 {
 
        width: 20px;
 
        height: 20px;
 
        transform: scale(.5);
 
        top: 550px;
 
        left: 470px;
 
        transition-delay: .2s;
 
        animation: spray1 10s linear infinite;
 
        -webkit-animation: spray1 10s linear infinite;
 
        -moz-animation: spray1 10s linear infinite;
 
        -o-animation: spray1 10s linear infinite;
 
        opacity: 1;
 
    }
 
 
    .spray14 {
 
        width: 15px;
 
        height: 15px;
 
        transform: scale(.5);
 
        top: 640px;
 
        left: 520px;
 
        transition-delay: .2s;
 
        animation: spray1 10s linear infinite;
 
        -webkit-animation: spray1 10s linear infinite;
 
        -moz-animation: spray1 10s linear infinite;
 
        -o-animation: spray1 10s linear infinite;
 
        opacity: 1;
 
    }
 
 
    .spray15 {
 
        width: 15px;
 
        height: 15px;
 
        transform: scale(.5);
 
        top: 680px;
 
        left: 748px;
 
        transition-delay: .2s;
 
        animation: spray1 10s linear infinite;
 
        -webkit-animation: spray1 10s linear infinite;
 
        -moz-animation: spray1 10s linear infinite;
 
        -o-animation: spray1 10s linear infinite;
 
        opacity: 1;
 
    }
 
 
    .spray16 {
 
        width: 20px;
 
        height: 20px;
 
        transform: scale(.5);
 
        top: 780px;
 
        left: 808px;
 
        transition-delay: .2s;
 
        animation: spray1 10s linear infinite;
 
        -webkit-animation: spray1 10s linear infinite;
 
        -moz-animation: spray1 10s linear infinite;
 
        -o-animation: spray1 10s linear infinite;
 
        opacity: 1;
 
        z-index: 0;
 
    }
 
 
    .spray17 {
 
        width: 15px;
 
        height: 15px;
 
        transform: scale(.5);
 
        top: 714px;
 
        left: 1108px;
 
        transition-delay: .2s;
 
        animation: spray1 10s linear infinite;
 
        -webkit-animation: spray1 10s linear infinite;
 
        -moz-animation: spray1 10s linear infinite;
 
        -o-animation: spray1 10s linear infinite;
 
        opacity: 1;
 
        z-index: 0;
 
    }
 
 
    .spray18 {
 
        width: 20px;
 
        height: 20px;
 
        transform: scale(.5);
 
        top: 550px;
 
        left: 1308px;
 
        transition-delay: .2s;
 
        animation: spray1 10s linear infinite;
 
        -webkit-animation: spray1 10s linear infinite;
 
        -moz-animation: spray1 10s linear infinite;
 
        -o-animation: spray1 10s linear infinite;
 
        opacity: 1;
 
    }
 
 
    .spray19 {
 
        width: 35px;
 
        height: 35px;
 
        transform: scale(.5);
 
        top: 640px;
 
        left: 1276px;
 
        transition-delay: .2s;
 
        animation: spray1 10s linear infinite;
 
        -webkit-animation: spray1 10s linear infinite;
 
        -moz-animation: spray1 10s linear infinite;
 
        -o-animation: spray1 10s linear infinite;
 
        opacity: 1;
 
        z-index: 0;
 
    }
 
 
 
    .spray20 {
 
        width: 10px;
 
        height: 10px;
 
        transform: scale(.5);
 
        top: 1000px;
 
        left: 1076px;
 
        transition-delay: .2s;
 
        animation: spray1 10s linear infinite;
 
        -webkit-animation: spray1 10s linear infinite;
 
        -moz-animation: spray1 10s linear infinite;
 
        -o-animation: spray1 10s linear infinite;
 
        opacity: 1;
 
        z-index: 0;
 
    }
 
 
    .spray21 {
 
        width: 25px;
 
        height: 25px;
 
        transform: scale(.5);
 
        top: 1040px;
 
        left: 1056px;
 
        transition-delay: .2s;
 
        animation: spray1 10s linear infinite;
 
        -webkit-animation: spray1 10s linear infinite;
 
        -moz-animation: spray1 10s linear infinite;
 
        -o-animation: spray1 10s linear infinite;
 
        opacity: 0.8;
 
        z-index: 0;
 
    }
 
 
    .spray22 {
 
        width: 25px;
 
        height: 25px;
 
        transform: scale(.5);
 
        top: 820px;
 
        left: 1206px;
 
        transition-delay: .2s;
 
        animation: spray1 10s linear infinite;
 
        -webkit-animation: spray1 10s linear infinite;
 
        -moz-animation: spray1 10s linear infinite;
 
        -o-animation: spray1 10s linear infinite;
 
        opacity: 0.8;
 
        z-index: 0;
 
    }
 
 
    .spray23 {
 
        width: 25px;
 
        height: 25px;
 
        transform: scale(.5);
 
        top: 880px;
 
        left: 1606px;
 
        transition-delay: .2s;
 
        animation: spray1 10s linear infinite;
 
        -webkit-animation: spray1 10s linear infinite;
 
        -moz-animation: spray1 10s linear infinite;
 
        -o-animation: spray1 10s linear infinite;
 
        opacity: 0.8;
 
        z-index: 0;
 
    }
 
 
    /* 水花  结束 */
 
 
    /*水花动画 结束*/
 
 
 
    /* 所有元素动画效果  结束 */
 
    /* ################################################################################ */
 
 
 
 
 
 
 
 
 
    /* ################################################################################ */
 
    /* 内容  开始 */
 
    .content {
 
        min-width: 1200px;
 
        width: 100%;
 
        position: absolute;
 
        z-index: 2;
 
        min-height: 1000px;
 
    }
 
 
    .content .bg {
 
        width: 100%;
 
        height: 1150px;
 
    }
 
 
    /*花*/
 
    .content .flower {
 
        position: absolute;
 
        top: 114px;
 
        z-index: 2;
 
    }
 
 
    /*花图片*/
 
    .content .flower img {
 
        width: 370px;
 
    }
 
 
    /*月亮*/
 
    .content .moon {
 
        position: absolute;
 
        top: 100px;
 
        left: 2%;
 
    }
 
 
    /*月亮图片*/
 
    .content .moon img {
 
        width: 220px;
 
    }
 
 
    /*鱼,鼠标滑过变暗*/
 
    .content .fish {
 
        position: absolute;
 
        top: 85px;
 
        left: 770px;
 
        z-index: 10;
 
    }
 
 
    .content .fish_hover1 {
 
        position: absolute;
 
        z-index: 20;
 
        width: 286px;
 
        height: 420px;
 
        top: 130px;
 
        left: 760px;
 
        border-bottom-right-radius: 50%;
 
        /*减少div的范围*/
 
        border-top-left-radius: 50%;
 
        /*减少div的范围*/
 
        border-bottom-left-radius: 50%;
 
        /*减少div的范围*/
 
       
 
    }
 
 
    .content .fish_hover2 {
 
        position: absolute;
 
        z-index: 20;
 
        width: 230px;
 
        height: 200px;
 
        top: 410px;
 
        left: 1094px;
 
        border-top-left-radius: 100%;
 
        /*减少div的范围*/
 
        border-bottom-right-radius: 88%;
 
        /*减少div的范围*/
 
       
 
 
    }
 
 
    .content .fish_hover3 {
 
        position: absolute;
 
        z-index: 20;
 
        width: 170px;
 
        height: 80px;
 
        top: 510px;
 
        left: 950px;
 
        border-top-right-radius: 100%;
 
        /*减少div的范围*/
 
       
 
    }
 
 
    .content .fish_bone {
 
        position: absolute;
 
        top: 170px;
 
        left: 780px;
 
        z-index: 350;
 
    }
 
 
    .content .fish img {
 
        width: 560px;
 
    }
 
 
    .content .fish_bone img {
 
        width: 450px;
 
        min-width: 10px;
 
        margin-left: 30px;
 
        opacity: 0.5;
 
    }
 
 
    .content .fish_bone a {
 
        color: white;
 
        font-size: 20px;
 
        z-index: 300;
 
    }
 
 
    /*鱼骨头文字开始*/
 
    .content .fish_bone .fish_bone1 {
 
        position: absolute;
 
        top: 84px;
 
        left: 100px;
 
        transform: rotate(26deg);
 
        -webkit-transform: rotate(26deg);
 
        -moz-transform: rotate(26deg);
 
        -o-transform: rotate(26deg);
 
    }
 
 
    .content .fish_bone .fish_bone2 {
 
        position: absolute;
 
        top: 118px;
 
        left: 64px;
 
        transform: rotate(18deg);
 
        -webkit-transform: rotate(18deg);
 
        -moz-transform: rotate(18deg);
 
        -o-transform: rotate(18deg);
 
    }
 
 
    .content .fish_bone .fish_bone3 {
 
        position: absolute;
 
        top: 154px;
 
        left: 66px;
 
        transform: rotate(14deg);
 
        -webkit-transform: rotate(14deg);
 
        -moz-transform: rotate(14deg);
 
        -o-transform: rotate(14deg);
 
    }
 
 
    .content .fish_bone .fish_bone4 {
 
        position: absolute;
 
        top: 192px;
 
        left: 54px;
 
        transform: rotate(2deg);
 
        -webkit-transform: rotate(2deg);
 
        -moz-transform: rotate(2deg);
 
        -o-transform: rotate(2deg);
 
    }
 
 
    .content .fish_bone .fish_bone5 {
 
        position: absolute;
 
        top: 234px;
 
        left: 54px;
 
        transform: rotate(-11deg);
 
        -webkit-transform: rotate(-11deg);
 
        -moz-transform: rotate(-11deg);
 
        -o-transform: rotate(-11deg);
 
    }
 
 
    .content .fish_bone .fish_bone6 {
 
        position: absolute;
 
        top: 270px;
 
        left: 74px;
 
        transform: rotate(-16deg);
 
        -webkit-transform: rotate(-16deg);
 
        -moz-transform: rotate(-16deg);
 
        -o-transform: rotate(-16deg);
 
    }
 
 
    .content .fish_bone .fish_bone7 {
 
        position: absolute;
 
        top: 310px;
 
        left: 90px;
 
        line-height: 20px;
 
        transform: rotate(-26deg);
 
        -webkit-transform: rotate(-26deg);
 
        -moz-transform: rotate(-26deg);
 
        -o-transform: rotate(-26deg);
 
    }
 
 
    /*鱼骨头文字结束*/
 
 
 
    /*尾巴*/
 
    .content .tail img {
 
        position: absolute;
 
        top: 140px;
 
        right: 0;
 
        width: 1020px;
 
    }
 
 
    .content .title {
 
        position: absolute;
 
        top: 172px;
 
        left: 70%;
 
        z-index: 1000;
 
    }
 
 
    .content .title img {
 
        width: 60%;
 
    }
 
 
 
    /*水波 上下波动*/
 
    .wave {
 
        background: url('images/home_background.jpg');
 
        height: 300px;
 
        transition: all 2s;
 
    }
 
 
    .wave img {
 
        width: 100%;
 
    }
 
 
    .wave .wave_back {
 
        position: absolute;
 
        top: 454px;
 
        z-index: 1;
 
    }
 
 
    .wave .wave_mid {
 
        position: absolute;
 
        top: 588px;
 
        z-index: 2;
 
    }
 
 
    .wave .wave_front {
 
        position: absolute;
 
        top: 574px;
 
        z-index: 3;
 
    }
 
 
    .content .description {
 
        width: 100%;
 
        background-color: #2A2854;
 
        text-align: center;
 
        position: absolute;
 
        top: 1192px;
 
        z-index: 10;
 
    }
 
 
    .content .description img {
 
        width: 1200px;
 
        height: auto;
 
        padding-top: 70px;
 
        padding-bottom: 60px;
 
    }
 
 
 
 
 
 
 
 
    /*定义输出设备中的页面最大可见区域宽度。*/
 
    /* ################################################################################ */
 
 
    @media only screen and (max-width: 2100px) {
 
        .spray10 {
 
            left: 1200px;
 
        }
 
       
 
       
 
    }
 
   
 
    @media only screen and (max-width: 1800px) {
 
        .spray10 {
 
            left: 1200px;
 
        }
 
       
 
        /*鱼,鼠标滑过变暗*/
 
        .content .fish {
 
            top: 85px;
 
            left: 612px;
 
        }
 
 
        .content .fish_bone {
 
            top: 170px;
 
            left: 620px;
 
        }
 
       
 
        .content .fish_hover1 {
 
            width: 252px;
 
            height: 400px;
 
            top: 150px;
 
            left: 620px;
 
        }
 
 
        .content .fish_hover2 {
 
            width: 230px;
 
            height: 200px;
 
            top: 410px;
 
            left: 930px;
 
            border-bottom-right-radius: 88%;
 
        }
 
 
        .content .fish_hover3 {
 
            width: 170px;
 
            height: 80px;
 
            top: 510px;
 
            left: 800px;
 
        }
 
    }
 
   
 
    @media only screen and (max-width: 1700px) {
 
        .spray10 {
 
            left: 1200px;
 
        }
 
       
 
        /*鱼,鼠标滑过变暗*/
 
        .content .fish {
 
            top: 85px;
 
            left: 512px;
 
        }
 
 
        .content .fish_bone {
 
            top: 170px;
 
            left: 520px;
 
        }
 
       
 
        .content .fish_hover1 {
 
            width: 252px;
 
            height: 400px;
 
            top: 150px;
 
            left: 520px;
 
        }
 
 
        .content .fish_hover2 {
 
            width: 230px;
 
            height: 200px;
 
            top: 410px;
 
            left: 830px;
 
            border-bottom-right-radius: 88%;
 
        }
 
 
        .content .fish_hover3 {
 
            width: 170px;
 
            height: 80px;
 
            top: 510px;
 
            left: 700px;
 
        }
 
    }
 
   
 
    @media only screen and (max-width: 1600px) {
 
        .spray10 {
 
            left: 1200px;
 
        }
 
       
 
        /*鱼,鼠标滑过变暗*/
 
        .content .fish {
 
            top: 85px;
 
            left: 512px;
 
        }
 
 
        .content .fish_bone {
 
            top: 170px;
 
            left: 520px;
 
        }
 
       
 
        .content .fish_hover1 {
 
            width: 252px;
 
            height: 400px;
 
            top: 150px;
 
            left: 520px;
 
        }
 
 
        .content .fish_hover2 {
 
            width: 230px;
 
            height: 200px;
 
            top: 410px;
 
            left: 830px;
 
            border-bottom-right-radius: 88%;
 
        }
 
 
        .content .fish_hover3 {
 
            width: 170px;
 
            height: 80px;
 
            top: 510px;
 
            left: 700px;
 
        }
 
    }
 
   
 
   
 
    @media only screen and (max-width: 1500px) {
 
        .spray10 {
 
            left: 1200px;
 
        }
 
       
 
        /*鱼,鼠标滑过变暗*/
 
        .content .fish {
 
            top: 85px;
 
            left: 512px;
 
        }
 
 
        .content .fish_bone {
 
            top: 170px;
 
            left: 520px;
 
        }
 
       
 
        .content .fish_hover1 {
 
            width: 252px;
 
            height: 400px;
 
            top: 150px;
 
            left: 520px;
 
        }
 
 
        .content .fish_hover2 {
 
            width: 230px;
 
            height: 200px;
 
            top: 410px;
 
            left: 830px;
 
            border-bottom-right-radius: 88%;
 
        }
 
 
        .content .fish_hover3 {
 
            width: 170px;
 
            height: 80px;
 
            top: 510px;
 
            left: 700px;
 
        }
 
 
    }
 
 
 
 
    /* 屏幕 1366 开始 1366 1368 1400*/
 
 
    @media only screen and (max-width: 1400px) {
 
        .content .bg img {
 
            width: 100%;
 
            height: 1150px;
 
        }
 
 
        /*花图片*/
 
        .content .flower img {
 
            width: 352px;
 
        }
 
 
        /*月亮*/
 
        .content .moon {
 
            top: 114px;
 
            left: 30px;
 
        }
 
 
        /*月亮图片*/
 
        /*月亮 渐渐变清晰动画*/
 
        .content .moon img {
 
            width: 220px;
 
        }
 
 
        /*鱼,鼠标滑过变暗*/
 
        .content .fish {
 
            top: 85px;
 
            left: 512px;
 
        }
 
 
        .content .fish_bone {
 
            top: 170px;
 
            left: 520px;
 
        }
 
 
        .content .fish img {
 
            width: 560px;
 
        }
 
 
        .content .fish_bone img {
 
            width: 450px;
 
            min-width: 10px;
 
            margin-left: 30px;
 
        }
 
 
        .content .tail img {
 
            top: 178px;
 
            right: 0;
 
            width: 750px;
 
        }
 
 
        .content .title {
 
            top: 172px;
 
            left: 70%;
 
        }
 
 
        .content .title img {
 
            width: 240px;
 
        }
 
 
        /*水波 上下波动*/
 
        .wave .wave_back {
 
            top: 400px;
 
        }
 
 
        .wave .wave_mid {
 
            top: 508px;
 
        }
 
 
        .wave .wave_front {
 
            top: 508px;
 
        }
 
 
        .content .description {
 
            top: 930px;
 
        }
 
 
        #homefooterdiv {
 
            top: 1356px;
 
        }
 
 
        .spray1 {
 
            top: 90px;
 
            left: 262px;
 
        }
 
 
        .spray2 {
 
            top: 206px;
 
            left: 258px;
 
        }
 
 
        .spray3 {
 
            top: 320px;
 
            left: 210px;
 
        }
 
 
        .spray4 {
 
            top: 100px;
 
            left: 500px;
 
        }
 
 
        .spray5 {
 
            top: 150px;
 
            left: 540px;
 
        }
 
 
        .spray6 {
 
            top: 250px;
 
            left: 420px;
 
        }
 
 
        .spray7 {
 
            top: 280px;
 
            left: 400px;
 
        }
 
 
        .spray8 {
 
            top: 80px;
 
            left: 670px;
 
        }
 
 
        .spray9 {
 
            top: 150px;
 
            left: 680px;
 
        }
 
 
        .spray10 {
 
            top: 320px;
 
            left: 806px;
 
        }
 
 
        .spray11 {
 
            top: 136px;
 
            left: 926px;
 
        }
 
 
        .spray12 {
 
            top: 316px;
 
            left: 1070px;
 
        }
 
 
        .spray13 {
 
            top: 400px;
 
            left: 360px;
 
        }
 
 
        .spray14 {
 
            top: 470px;
 
            left: 380px;
 
        }
 
 
        .spray15 {
 
            top: 540px;
 
            left: 548px;
 
        }
 
 
        .spray16 {
 
            top: 650px;
 
            left: 580px;
 
        }
 
 
        .spray17 {
 
            top: 772px;
 
            left: 758px;
 
        }
 
 
        .spray18 {
 
            top: 550px;
 
            left: 1024px;
 
        }
 
 
        .spray19 {
 
            top: 790px;
 
            left: 730px;
 
        }
 
 
        .spray20 {
 
            top: 650px;
 
            left: 836px;
 
        }
 
 
        .spray21 {
 
            top: 710px;
 
            left: 860px;
 
        }
 
 
        .spray22 {
 
            top: 720px;
 
            left: 1134px;
 
        }
 
 
        .spray23 {
 
            top: 480px;
 
            left: 990px;
 
        }
 
 
        /*鱼骨头文字开始*/
 
        .content .fish_bone .fish_bone1 {
 
            top: 80px;
 
            left: 94px;
 
        }
 
 
        .content .fish_bone .fish_bone2 {
 
            top: 120px;
 
            left: 60px;
 
        }
 
 
        .content .fish_bone .fish_bone3 {
 
            top: 152px;
 
            left: 60px;
 
        }
 
 
        .content .fish_bone .fish_bone4 {
 
            top: 192px;
 
            left: 50px;
 
        }
 
 
        .content .fish_bone .fish_bone5 {
 
            top: 234px;
 
            left: 44px;
 
        }
 
 
        .content .fish_bone .fish_bone6 {
 
            top: 272px;
 
            left: 66px;
 
        }
 
 
        .content .fish_bone .fish_bone7 {
 
            top: 310px;
 
            left: 96px;
 
            line-height: 20px;
 
        }
 
 
        /*鱼骨头文字结束*/
 
 
        .content .fish_hover1 {
 
            width: 252px;
 
            height: 400px;
 
            top: 150px;
 
            left: 520px;
 
        }
 
 
        .content .fish_hover2 {
 
            width: 230px;
 
            height: 200px;
 
            top: 410px;
 
            left: 830px;
 
            border-bottom-right-radius: 88%;
 
        }
 
 
        .content .fish_hover3 {
 
            width: 170px;
 
            height: 80px;
 
            top: 510px;
 
            left: 700px;
 
        }
 
    }
 
 
    /* 屏幕 1366 结束*/
 
    /* ################################################################################ */
 
 
 
 
 
    /* 内容  结束 */
 
    /* ################################################################################ */
 
 
 
 
</style>
 
 
  
 
     <!-- ################################################################################ -->
 
     <!-- ################################################################################ -->
Line 1,634: Line 38:
  
 
             <div>
 
             <div>
                 <a href="#" class="fish_bone1">TEAM</a>
+
                 <a href="https://2019.igem.org/Team:SUIS_Shanghai/Team" class="fish_bone1">TEAM</a>
                 <a href="#" class="fish_bone2">PROJECT</a>
+
                 <a href="https://2019.igem.org/Team:SUIS_Shanghai/Description" class="fish_bone2">PROJECT</a>
                 <a href="#" class="fish_bone3">PARTS</a>
+
                 <a href="https://2019.igem.org/Team:SUIS_Shanghai/Parts" class="fish_bone3">PARTS</a>
                 <a href="#" class="fish_bone4">SAFETY</a>
+
                 <a href="https://2019.igem.org/Team:SUIS_Shanghai/Safety" class="fish_bone4">SAFETY</a>
                 <a href="#" class="fish_bone5">PRACTISE</a>
+
                 <a href="https://2019.igem.org/Team:SUIS_Shanghai/Human_Practices" class="fish_bone5">PRACTISE</a>
                 <a href="#" class="fish_bone6">AWARDS</a>
+
                 <a href="https://2019.igem.org/Team:SUIS_Shanghai/Applied_Design" class="fish_bone6">AWARDS</a>
                 <a href="#" class="fish_bone7">JUDGING<br />&nbsp;&nbsp;&nbsp;&nbsp;FORM</a>
+
                 <a href="https://igem.org/2018_Judging_Form?team=SUIS_Shanghai" class="fish_bone7">JUDGING<br/>&nbsp;&nbsp;&nbsp;&nbsp;FORM</a>
 
             </div>
 
             </div>
  
Line 1,671: Line 75:
 
         <!--描述简介-->
 
         <!--描述简介-->
 
         <div class="description">
 
         <div class="description">
             <img src="https://static.igem.org/mediawiki/2019/5/5f/T--SUIS_Shanghai--home_description.png" />
+
             <img src="https://static.igem.org/mediawiki/2019/archive/5/5f/20191021053754%21T--SUIS_Shanghai--home_description.png" />
 
         </div>
 
         </div>
  
Line 1,701: Line 105:
  
 
     </div>
 
     </div>
 
  
  
 
     <!-- 内容  结束 -->
 
     <!-- 内容  结束 -->
 
     <!-- ################################################################################ -->
 
     <!-- ################################################################################ -->
 
 
 
 
 
 
 
 
 
  
  
Line 1,723: Line 117:
 
     <!-- 底部版权信息  开始 -->
 
     <!-- 底部版权信息  开始 -->
  
     <div id="homefooterdiv">
+
     <div id="homefooterdiv_home">
 
         <div id="footer1">
 
         <div id="footer1">
 
             <div id="footer1mid">
 
             <div id="footer1mid">
                 <img src="https://static.igem.org/mediawiki/2019/e/ee/T--SUIS_Shanghai--home_footerlogo.png" id="whitelogo">
+
                 <a class="mlink" href="https://2019.igem.org/Team:SUIS_Shanghai"><img src="https://static.igem.org/mediawiki/2019/e/ee/T--SUIS_Shanghai--home_footerlogo.png" id="whitelogo"></a>
 
                 <div id="foormidword">IGEM &nbsp; | &nbsp; WANYUAN &nbsp; | &nbsp; SUIS</div>
 
                 <div id="foormidword">IGEM &nbsp; | &nbsp; WANYUAN &nbsp; | &nbsp; SUIS</div>
 
                 <div id="foorrightdiv">
 
                 <div id="foorrightdiv">
Line 1,737: Line 131:
 
         <div id="footer2">Copyright © 2019 Shanghai United International School. All Rights Reserved.</div>
 
         <div id="footer2">Copyright © 2019 Shanghai United International School. All Rights Reserved.</div>
 
     </div>
 
     </div>
 +
  
 
     <!-- 底部版权信息  结束 -->
 
     <!-- 底部版权信息  结束 -->
 
     <!-- ################################################################################ -->
 
     <!-- ################################################################################ -->
 
 
  
  
  
 
</html>
 
</html>

Latest revision as of 19:55, 21 October 2019

IGEM   |   WANYUAN   |   SUIS

Website: wanyuan.suis.com.cn

Mail Box: suisigem@outlook.com

No.509, Pingji Rd, Minhang District, Shanghai

Copyright © 2019 Shanghai United International School. All Rights Reserved.