码迷，mamicode.com
首页 > Web开发 > 详细

QQ音乐页面css3动画的应用

时间：2017-06-03 12:46:23      阅读：298      评论：0      收藏：0      [点我收藏+]

标签：font   main   try   url   mode   pos   copyright   cti   bsp   

<!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-width: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;
    width: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;
    width: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;
    width: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;
    width: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-width:161px;
    margin:0 4px 0 0;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    vertical-align:middle;
    _width:161px
}
.mod_st .mod_st_userinfo .out {
    margin:0 0 0 4px
}
.mod_st .mod_st_userinfo .bt_vip {
    width: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;
    width: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;
    width:100%;
    min-width:1000px;
    height:30px;
    z-index:100;
    left:0;
    _width:100px;
    _margin:0 auto
}
.mod_mini_nav ul {
    width:960px;
    height:30px;
    margin:0 auto
}
.mod_mini_nav ul li {
    float:left;
    height:30px;
    line-height:30px;
    text-align:center;
    width:240px;
    position:relative
}
.mod_mini_nav ul li a {
    display:block;
    height:30px
}
.mod_mini_nav ul li a i {
    position:absolute;
    height:100%;
    width: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;
    width: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 7px\9;
    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;
    width: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;
    width: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% {width:100px}
    20% {width:200px}
    40% {width:600px}
    60% {width:800px}
    80% {width:900px}
    100% {width:1000px}
}
@-moz-keyframes bg2 {
    10% {width:100px}
    20% {width:200px}
    40% {width:600px}
    60% {width:800px}
    80% {width:900px}
    100% {width:1000px}
}
:root .mod_bg .bg3 {
    position:absolute;
    width: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;
    width: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;
    width: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;
    width: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;
    width:211px;
    height:0;
    right:172px;
    top:50px;
    top:-100px\0;
    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;
    width: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;
    width: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;
    width: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;
    width:486px;
    height:486px;
    top:309px;
    right:0;
    z-index:10
}
.mod_tit {
    position:relative;
    height:64px
}
.mod_tit i {
    position:absolute;
    height:64px;
    width: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;
    width:174px;
    height:52px
}
.btn_kaitong i {
    position:absolute;
    width: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 {
    width: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 {
    width:288px;
    height:42px;
    overflow:hidden
}
.mod_award .award_user ul li {
    width:278px;
    padding:0 5px;
    line-height:21px
}
.mod_ask {
    position:absolute;
    top:485px;
    left:83px;
    z-index:20;
    width: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;
    _width:917px
}
.privilege_list li {
    position:relative;
    width:191px;
    height:191px;
    float:left;
    margin:0 37px 30px 0
}
.privilege_list li i {
    position:absolute;
    width: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 {
    width: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;
    width: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;
    _width:852px
}
.question_list li .que_detail_1 {
    width: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;
    width: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>

QQ音乐页面css3动画的应用

标签：font   main   try   url   mode   pos   copyright   cti   bsp   

原文地址：http://www.cnblogs.com/zhaolizhe/p/6936558.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！