zoukankan      html  css  js  c++  java
  • QQ音乐页面css3动画的应用

    <!DOCTYPE html>
    <!-- saved from url=(0036)http://y.qq.com/vip/promote_yearvip/ -->
    <html lang="zh-cn">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>升级年费绿钻,iPad、耳机大奖等你拿</title>
    <!--[if IE 6]><script type="text/javascript">try{document.execCommand('BackgroundImageCache',false,true);}catch(e){}</script><![endif]-->
    <style>
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, lengend, button, input, textarea, th, td {
        margin:0;
        padding:0
    }
    body, button, input, select, textarea, th {
        font:12px/1.5 Tahoma, "hiragino sans gb", Helvetica, Arial
    }
    h1, h2, h3, h4, h5, h6 {
        font-size:100%
    }
    li {
        list-style:none
    }
    img {
        border:0 none
    }
    input[type="button"], input[type='submit'] {
        cursor:pointer
    }
    button {
        cursor:pointer
    }
    table {
        border-collapse:collapse;
        border-spacing:0
    }
    a {
        text-decoration:none
    }
    a:hover {
        text-decoration:underline
    }
    img {
        -ms-interpolation-mode:bicubic
    }
    .none, .hid {
        display:none
    }
    .mod_st {
        height:45px;
        min-960px;
        text-align:center;
        font:100 12px/14px Arial;
        position:relative;
        background:url(http://imgcache.qq.com/ACT/music/global/img/nav_bg_x.png) repeat-x
    }
    .mod_st a {
        color:#FFF;
        text-decoration:none
    }
    .mod_st .mod_st_main {
        position:relative;
        960px;
        height:45px;
        margin:0 auto
    }
    .mod_st .mod_st_logo {
        position:absolute;
        left:0;
        top:6px;
        z-index:100
    }
    .mod_st .mod_st_logo a {
        display:block;
        87px;
        height:31px;
        overflow:hidden;
        line-height:100px;
        background:url(http://imgcache.qq.com/ACT/music/global/img/nav_bg.png) no-repeat 0 -62px
    }
    .mod_st .mod_st_tit {
        display:none
    }
    .mod_st .mod_st_nav {
        position:absolute;
        left:95px;
        top:9px;
        555px;
        height:26px;
        background:url(http://imgcache.qq.com/ACT/music/global/img/nav_bg.png) no-repeat
    }
    .mod_st .mod_st_nav li {
        float:left;
        color:#fff;
        margin:0 4px 0 12px;
        _display:inline
    }
    .mod_st .mod_st_nav li a {
        display:block;
        line-height:25px;
    *line-height:27px
    }
    .mod_st .mod_st_nav .m_st_downplayer {
        margin:0 4px 0 35px
    }
    .mod_st .mod_st_userinfo {
        position:relative;
        right:0;
        top:12px;
        padding:0;
        float:right;
        310px;
        height:20px;
        line-height:20px;
        text-align:right;
        zoom:1;
        color:#5b5b5b
    }
    .mod_st .mod_st_userinfo a {
        color:#325e7f
    }
    .mod_st .mod_st_userinfo .user_name {
        display:inline-block;
        max-161px;
        margin:0 4px 0 0;
        text-overflow:ellipsis;
        overflow:hidden;
        white-space:nowrap;
        vertical-align:middle;
        _161px
    }
    .mod_st .mod_st_userinfo .out {
        margin:0 0 0 4px
    }
    .mod_st .mod_st_userinfo .bt_vip {
        76px;
        height:19px;
        font-size:0;
        line-height:80px;
        overflow:hidden;
        cursor:pointer;
        border:0 none;
        vertical-align:middle;
        background:url(http://imgcache.qq.com/ACT/music/global/img/nav_bg.png) no-repeat 0 -33px;
        margin:0 0 -2px 20px;
        zoom:1
    }
    .mod_footer {
        height:76px;
        padding:14px 0;
        font-size:12px;
        font-family:Tahoma, Arial;
        100%;
        margin:0 auto;
        clear:both
    }
    .mod_footer, .mod_footer a {
        color:#2b375d
    }
    .mod_footer p {
        height:22px;
        line-height:22px;
        text-align:center
    }
    .mod_footer a {
        font-size:12px;
        text-decoration:none;
        outline:none
    }
    .mod_footer a:hover {
        text-decoration:underline
    }
    .mod_footer a:active {
        outline:none
    }
    .mod_footer .footermenu {
        vertical-align:14px
    }
    .mod_footer .footermenu a {
        margin:0 2px
    }
    .mod_footer .copyrightzh a {
        margin:0 0 0 6px
    }
    body {
        background:#000;
        color:#666
    }
    fieldset {
        border:none
    }
    legend {
        display:none
    }
    .mod_footer, .mod_footer a {
        color:#666
    }
    i {
        font-style:normal
    }
    a {
        color:#919191
    }
    .ctx1 {
        color:#43ef02
    }
    .mod_mini_nav {
        background:url(http://imgcache.qq.com/mediastyle/event/m_120306_nianfei/img/sprite.png) repeat-x 0 -530px;
        position:absolute;
        top:0;
        100%;
        min-1000px;
        height:30px;
        z-index:100;
        left:0;
        _100px;
        _margin:0 auto
    }
    .mod_mini_nav ul {
        960px;
        height:30px;
        margin:0 auto
    }
    .mod_mini_nav ul li {
        float:left;
        height:30px;
        line-height:30px;
        text-align:center;
        240px;
        position:relative
    }
    .mod_mini_nav ul li a {
        display:block;
        height:30px
    }
    .mod_mini_nav ul li a i {
        position:absolute;
        height:100%;
        100%;
        top:0;
        left:0;
        background:url(http://imgcache.qq.com/mediastyle/event/m_120306_nianfei/img/bg_nav.png) no-repeat 0 0;
        cursor:pointer
    }
    .mod_mini_nav ul .mini_nav_1 a i {
        background-position:0 0
    }
    .mod_mini_nav ul .mini_nav_1.current a i {
        background-position:0 -31px
    }
    .mod_mini_nav ul .mini_nav_2 a i {
        background-position:-241px 0
    }
    .mod_mini_nav ul .mini_nav_2.current a i {
        background-position:-241px -31px
    }
    .mod_mini_nav ul .mini_nav_3 a i {
        background-position:-481px 0
    }
    .mod_mini_nav ul .mini_nav_3.current a i {
        background-position:-481px -31px
    }
    .mod_mini_nav ul .mini_nav_4 a i {
        background-position:-721px 0
    }
    .mod_mini_nav ul .mini_nav_4.current a i {
        background-position:-721px -31px
    }
    .wrap {
        background:url(http://imgcache.qq.com/mediastyle/event/m_120306_nianfei/img/bg_body.png) repeat-x 0 0;
        position:relative
    }
    .main {
        position:relative;
        height:500px;
        1000px;
        margin:0 auto;
        overflow:hidden
    }
    .mod_bg {
        position:relative;
        height:459px;
        background:url(http://imgcache.qq.com/mediastyle/event/m_120306_nianfei/img/banner.png) no-repeat 0 7px9;
        margin-top:30px
    }
    @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
        head~body .mod_bg {
            background:url(http://imgcache.qq.com/mediastyle/event/m_120306_nianfei/img/banner.png) no-repeat 0 7px
        }
    }
    :root .mod_bg .bg1 {
        position:absolute;
        817px;
        height:97px;
        left:84px;
        top:50px;
        background:url(http://imgcache.qq.com/mediastyle/event/m_120306_nianfei/img/s1.png) no-repeat 0 0;
        z-index:2;
        -webkit-animation-name:bg1;
        opacity:0;
        -webkit-animation-duration:1.2s;
        -webkit-animation-iteration-count:1;
        -webkit-transition-timing-function:ease-in;
        -webkit-animation-fill-mode:forwards;
        -moz-animation-name:bg1;
        -moz-animation-duration:1.2s;
        -moz-animation-iteration-count:1;
        -moz-transition-timing-function:ease-in;
        -moz-animation-fill-mode:forwards
    }
    @-webkit-keyframes bg1 {
        0% { opacity:0 }
        40% { opacity:.4 }
        80% { opacity:.8 }
        100% { opacity:1.0 }
    }
    @-moz-keyframes bg1 {
        0% { opacity:0 }
        40% { opacity:.4 }
        80% { opacity:.8}
        100% { opacity:1.0 }
    }
    :root .mod_bg .bg2 {
        position:absolute;
        0;
        height:312px;
        left:0;
        top:147px;
        background:url(http://imgcache.qq.com/mediastyle/event/m_120306_nianfei/img/s2.png) no-repeat 0 0;
        z-index:2;
        -webkit-animation-name:bg2;
        -webkit-animation-duration:.7s;
        -webkit-transition-timing-function:ease-in;
        -webkit-animation-delay:1.8s;
        -webkit-animation-fill-mode:forwards;
        -moz-animation-name:bg2;
        -moz-animation-duration:.7s;
        -moz-transition-timing-function:ease-in;
        -moz-animation-delay:1.8s;
        -moz-animation-fill-mode:forwards
    }
    @-webkit-keyframes bg2 {
        10% {100px}
        20% {200px}
        40% {600px}
        60% {800px}
        80% {900px}
        100% {1000px}
    }
    @-moz-keyframes bg2 {
        10% {100px}
        20% {200px}
        40% {600px}
        60% {800px}
        80% {900px}
        100% {1000px}
    }
    :root .mod_bg .bg3 {
        position:absolute;
        206px;
        height:137px;
        left:122px;
        top:65px;
        background:url(http://imgcache.qq.com/mediastyle/event/m_120306_nianfei/img/s3.png) no-repeat 0 0;
        z-index:2;
        -webkit-animation-name:bg3;
        -webkit-animation-duration:.6s;
        -webkit-transition-timing-function:ease-in;
        -webkit-animation-delay:1.2s;
        -webkit-animation-fill-mode:forwards;
        -webkit-transform:scale(0, 1);
        -webkit-transform-origin:50% 0;
        -moz-animation-name:bg3;
        -moz-animation-duration:.6s;
        -moz-transition-timing-function:ease-in;
        -moz-animation-delay:1.2s;
        -moz-animation-fill-mode:forwards;
        -moz-transform:scale(0, 1);
        -moz-transform-origin:50% 0
    }
    @-webkit-keyframes bg3 {
        0% {-webkit-transform:scale(1, 1)}
        20% {-webkit-transform:scale(0.2, 1)}
        30% {-webkit-transform:scale(0.6, 1)}
        40% {-webkit-transform:scale(1.1, 1)}
        60% {-webkit-transform:scale(0.8, 1)}
        80% {-webkit-transform:scale(1.1, 1)}
        100% {-webkit-transform:scale(1, 1)}
    }
    @-moz-keyframes bg3 {
    0% {
    -moz-transform:scale(1, 1)
    }
    20% {
    -moz-transform:scale(0.2, 1)
    }
    30% {
    -moz-transform:scale(0.6, 1)
    }
    40% {
    -moz-transform:scale(1.1, 1)
    }
    60% {
    -moz-transform:scale(0.8, 1)
    }
    80% {
    -moz-transform:scale(1.1, 1)
    }
    100% {
    -moz-transform:scale(1, 1)
    }
    }
    :root .mod_bg .bg4 {
        position:absolute;
        204px;
        height:116px;
        right:-226px;
        top:31px;
        background:url(http://imgcache.qq.com/mediastyle/event/m_120306_nianfei/img/s4.png) no-repeat 0 0;
        z-index:2;
        -webkit-animation-name:bg4;
        -webkit-animation-duration:.3s;
        -webkit-transition-timing-function:ease-in;
        -webkit-animation-delay:2.2s;
        -webkit-animation-fill-mode:forwards;
        -moz-animation-name:bg4;
        -moz-animation-duration:.3s;
        -moz-transition-timing-function:ease-in;
        -moz-animation-delay:2.2s;
        -moz-animation-fill-mode:forwards
    }
    @-webkit-keyframes bg4 {
    0% {
    right:-226px
    }
    30% {
    right:-126px
    }
    70% {
    right:-16px
    }
    100% {
    right:22px
    }
    }
    @-moz-keyframes bg4 {
    0% {
    right:-226px
    }
    30% {
    right:-126px
    }
    70% {
    right:-16px
    }
    100% {
    right:22px
    }
    }
    :root .mod_bg .bg5 {
        position:absolute;
        185px;
        height:227px;
        right:74px;
        top:-267px;
        background:url(http://imgcache.qq.com/mediastyle/event/m_120306_nianfei/img/s5.png) no-repeat 0 0;
        z-index:2;
        -webkit-animation-name:bg5;
        -webkit-animation-duration:.3s;
        -webkit-transition-timing-function:ease-in;
        -webkit-animation-delay:2.4s;
        -webkit-animation-fill-mode:forwards;
        -moz-animation-name:bg5;
        -moz-animation-duration:.3s;
        -moz-transition-timing-function:ease-in;
        -moz-animation-delay:2.4s;
        -moz-animation-fill-mode:forwards
    }
    @-webkit-keyframes bg5 {
    0% {
    top:-267px
    }
    30% {
    top:-126px
    }
    70% {
    top:-66px
    }
    100% {
    top:10px
    }
    }
    @-moz-keyframes bg5 {
    0% {
    top:-267px
    }
    30% {
    top:-126px
    }
    70% {
    top:-66px
    }
    100% {
    top:10px
    }
    }
    :root .mod_bg .bg6 {
        position:absolute;
        528px;
        height:94px;
        left:301px;
        top:-250px;
        background:url(http://imgcache.qq.com/mediastyle/event/m_120306_nianfei/img/s6.png) no-repeat 0 0;
        z-index:2;
        -webkit-animation-name:bg6;
        -webkit-animation-duration:1.0s;
        -webkit-transition-timing-function:ease-in;
        -webkit-animation-delay:2.7s;
        -webkit-animation-fill-mode:forwards;
        -moz-animation-name:bg6;
        -moz-animation-duration:1.0s;
        -moz-transition-timing-function:ease-in;
        -moz-animation-delay:2.7s;
        -moz-animation-fill-mode:forwards
    }
    @-webkit-keyframes bg6 {
    0% {
    top:-250px
    }
    5% {
    top:-126px
    }
    10% {
    top:-66px
    }
    15% {
    top:10px
    }
    30% {
    top:70px
    }
    40% {
    top:100px
    }
    50% {
    top:156px
    }
    60% {
    top:140px
    }
    70% {
    top:156px
    }
    80% {
    top:166px
    }
    85% {
    top:156px
    }
    95% {
    top:146px
    }
    100% {
    top:156px
    }
    }
    @-moz-keyframes bg6 {
    0% {
    top:-250px
    }
    5% {
    top:-126px
    }
    10% {
    top:-66px
    }
    15% {
    top:10px
    }
    30% {
    top:70px
    }
    40% {
    top:100px
    }
    50% {
    top:156px
    }
    60% {
    top:140px
    }
    70% {
    top:156px
    }
    80% {
    top:166px
    }
    85% {
    top:156px
    }
    95% {
    top:146px
    }
    100% {
    top:156px
    }
    }
    :root .mod_bg .bg7 {
        position:absolute;
        211px;
        height:0;
        right:172px;
        top:50px;
        top:-100px;
        background:url(http://imgcache.qq.com/mediastyle/event/m_120306_nianfei/img/s7.png) no-repeat 0 0;
        z-index:1;
        -webkit-animation-name:bg7;
        -webkit-animation-duration:400ms;
        -webkit-transition-timing-function:ease-in;
        -webkit-animation-delay:3.1s;
        -webkit-animation-fill-mode:forwards;
        -moz-animation-name:bg7;
        -moz-animation-duration:400ms;
        -moz-transition-timing-function:ease-in;
        -moz-animation-delay:3.1s;
        -moz-animation-fill-mode:forwards
    }
    @-webkit-keyframes bg7 {
        10% {
            top:40px;
            height:43px
        }
        40% {
            top:30px;
            height:43px
        }
        70% {
            top:20px;
            height:43px
        }
        90% {
            top:10px;
            height:43px
        }
        100% {
            top:7px;
            height:43px
        }
    }
    @-moz-keyframes bg7 {
        10% {
            top:40px;
            height:43px
        }
        40% {
            top:30px;
            height:43px
        }
        70% {
            top:20px;
            height:43px
        }
        90% {
            top:10px;
            height:43px
        }
        100% {
            top:7px;
            height:43px
        }
    }
    .mod_line {
        position:absolute;
        height:2378px;
        4px;
        padding:0 13px;
        top:460px;
        left:7px
    }
    .mod_line .line1 {
        height:285px;
        background:#1e1e1e
    }
    .mod_line .line2 {
        height:598px;
        background:#262626
    }
    .mod_line .line3 {
        height:580px;
        background:#1e1e1e
    }
    .mod_line .line4 {
        height:911px;
        background:#262626
    }
    .mod_line .dian1, .mod_line .dian2, .mod_line .dian3, .mod_line .dian4 {
        position:absolute;
        30px;
        height:30px;
        background:url(http://imgcache.qq.com/mediastyle/event/m_120306_nianfei/img/sprite.png) no-repeat 0 0;
        left:0
    }
    .mod_line .dian1 {
        top:31px;
        background-position:0 0
    }
    .mod_line .dian2 {
        top:316px;
        background-position:-31px 0
    }
    .mod_line .dian3 {
        top:922px;
        background-position:-62px 0
    }
    .mod_line .dian4 {
        top:1506px;
        background-position:-93px 0
    }
    .mod_z {
        position:absolute;
        top:1173px;
        left:0;
        96px;
        height:170px;
        background:url(http://imgcache.qq.com/mediastyle/event/m_120306_nianfei/img/sprite.png) no-repeat 0 -359px
    }
    .mod_flash {
        position:absolute;
        486px;
        height:486px;
        top:309px;
        right:0;
        z-index:10
    }
    .mod_tit {
        position:relative;
        height:64px
    }
    .mod_tit i {
        position:absolute;
        height:64px;
        326px;
        background:url(http://imgcache.qq.com/mediastyle/event/m_120306_nianfei/img/sprite.png) no-repeat 0 0;
        left:0;
        top:0
    }
    .mod_award {
        position:absolute;
        top:290px;
        left:18px;
        z-index:20
    }
    .mod_award p {
        line-height:1.8
    }
    .mod_award .user_name {
        color:#919191;
        font-size:14px
    }
    .mod_award .btn_box {
        overflow:hidden;
        clear:both;
        padding-top:15px
    }
    .btn_kaitong {
        position:relative;
        display:block;
        float:left;
        174px;
        height:52px
    }
    .btn_kaitong i {
        position:absolute;
        174px;
        height:52px;
        background:url(http://imgcache.qq.com/mediastyle/event/m_120306_nianfei/img/sprite.png) no-repeat -97px -359px;
        left:0;
        top:0;
        cursor:pointer
    }
    .btn_kaitong:hover {
        opacity:.8;
        filter:alpha(opacity=80)
    }
    .mod_award .award_user {
        288px;
        height:42px;
        float:left;
        overflow:hidden;
        background:url(http://imgcache.qq.com/mediastyle/event/m_120306_nianfei/img/sprite.png) no-repeat 0 -306px;
        padding:5px 13px 5px 5px;
        margin-left:19px
    }
    .mod_award .award_scroll {
        288px;
        height:42px;
        overflow:hidden
    }
    .mod_award .award_user ul li {
        278px;
        padding:0 5px;
        line-height:21px
    }
    .mod_ask {
        position:absolute;
        top:485px;
        left:83px;
        z-index:20;
        450px
    }
    .mod_ask p {
        padding-top:5px;
        line-height:21px
    }
    .mod_ask .mod_tit i {
        background-position:0 -101px
    }
    .mod_privilege {
        position:absolute;
        top:769px;
        left:83px
    }
    .mod_privilege .mod_tit i {
        background-position:0 -238px
    }
    .privilege_list {
        overflow:hidden;
        padding-top:48px;
        _917px
    }
    .privilege_list li {
        position:relative;
        191px;
        height:191px;
        float:left;
        margin:0 37px 30px 0
    }
    .privilege_list li i {
        position:absolute;
        191px;
        height:191px;
        top:0;
        left:0;
        background:url(http://imgcache.qq.com/mediastyle/event/m_120306_nianfei/img/bg_tq.png) no-repeat 0 0
    }
    .privilege_list .prv1 i {
        background-position:0 0
    }
    .privilege_list .prv2 i {
        background-position:-228px 0
    }
    .privilege_list .prv3 i {
        background-position:-457px 0
    }
    .privilege_list .prv4 i {
        background-position:-685px 0
    }
    .privilege_list .prv5 i {
        background-position:0 -221px
    }
    .privilege_list .prv6 i {
        background-position:-228px -221px
    }
    .privilege_list .prv7 i {
        background-position:-457px -221px
    }
    .mod_vs {
        position:absolute;
        top:1380px;
        left:83px
    }
    .mod_vs .table_vs {
        876px;
        border:1px solid #363636;
        margin-top:37px
    }
    .mod_vs .table_vs caption {
        display:none
    }
    .mod_vs .table_vs td {
        border-bottom:1px solid #363636;
        padding:11px 20px;
        background:#1e1e1e
    }
    .mod_vs .table_vs td.bg {
        background:#242424
    }
    .mod_vs .table_vs thead th {
        height:40px;
        line-height:40px;
        text-align:center;
        background:#2a2a2a;
        font-weight:bold;
        color:#919191
    }
    .mod_vs .mod_tit i {
        background-position:0 -174px
    }
    .mod_help {
        position:absolute;
        top:1965px;
        left:83px;
        font-size:14px
    }
    .mod_help .mod_tit i {
        background-position:0 -36px
    }
    .icon_que, .icon_que2 {
        display:inline-block;
        16px;
        height:16px;
        background:url(http://imgcache.qq.com/mediastyle/event/m_120306_nianfei/img/sprite.png) no-repeat -131px 0
    }
    .icon_que2 {
        background-position:-148px 0;
        overflow:hidden
    }
    .question_list {
        padding-top:20px;
        _852px
    }
    .question_list li .que_detail_1 {
        810px;
        background:#262626;
        border:1px solid #262626;
        border-radius:0 3px 3px;
        padding:15px 20px;
        line-height:1.8;
        font-size:12px;
        margin:25px 0;
        position:relative
    }
    .question_list li .que_detail_1 li {
        line-height:1.8;
        padding:0
    }
    .question_list li .que_detail_1 h3 {
        padding-top:20px
    }
    .question_list li .que_detail_1 ul li ul {
        padding-left:34px
    }
    .question_list li {
        vertical-align:middle;
        padding:5px 0
    }
    .question_list li .icon_que, .question_list li .icon_que2 {
        vertical-align:middle;
        margin-right:12px
    }
    .icon_jian {
        position:absolute;
        5px;
        height:7px;
        background:url(http://imgcache.qq.com/mediastyle/event/m_120306_nianfei/img/sprite.png) no-repeat -124px 0;
        overflow:hidden;
        left:-1px;
        top:-7px
    }
    .mod_pop .mod_hint .text_sel p {
        padding:3px 0;
        vertical-align:middle
    }
    .mod_pop .mod_hint .text_sel p input {
        vertical-align:middle;
        margin-right:3px
    }
    #GeneratedByCssGaga174 {
        transform:rotate(20120321163658deg)
    }/*  |xGv00|834744175a2ccc7c647f8b99153eb1ac */
    </style>
    </head>
    <body>
    <div class="wrap">
      <div class="main">
        <!--页面背景 动画层 S-->
        <div class="mod_bg">
          <div class="bg1"></div>
          <div class="bg2"></div>
          <div class="bg3"></div>
          <div class="bg4"></div>
          <div class="bg5"></div>
          <div class="bg6"></div>
          <div class="bg7"></div>
        </div>
        <!--页面背景 动画层 E-->
      </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    从PowerDesigner概念设计模型(CDM)中的3种实体关系说起
    详细整数分区的问题解释
    JavaWeb显示器
    mysql中国的内容php网页乱码问题
    Linux开发环境的搭建和使用——Linux本必备软件SSH
    【Android UI设计和开发】动画(Animation)详细说明(一)
    应该是什么在预新手发“外链”(4)最终的外链的方法
    选择29部分有用jQuery应用程序插件(免费点数下载)
    设计模式--装饰图案
    Webserver管理系列:3、Windows Update
  • 原文地址:https://www.cnblogs.com/zhaolizhe/p/6936558.html
Copyright © 2011-2022 走看看