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-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>
