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>

时间: 2024-08-09 19:43:02

QQ音乐页面css3动画的应用的相关文章

demo: 全页面CSS3动画的一个参考例子

全页面CSS3动画的一个参考例子: http://wow.blizzard.cn/wow/wod-achievement/ 魔兽的一个活动页 第二页.第三页,文字进入页面 <script src="http://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script> <input type="button" value="3屏显示" id="btn31&

iOS开发--QQ音乐练习,旋转动画的实现,音乐工具类的封装,定时器的使用技巧,SliderBar的事件处理

一.旋转动画的实现 二.音乐工具类的封装 -- 返回所有歌曲,返回当前播放歌曲,设置当前播放歌曲,返回下一首歌曲,返回上一首歌曲方法的实现 头文件 .m文件 1 #import "ChaosMusicTool.h" 2 #import "MJExtension.h" 3 #import "ChaosMusic.h" 4 5 static NSArray *_musics; 6 static ChaosMusic *_playingMusic; 7

css3动画应用-音乐唱片旋转播放特效

css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击图片,音乐播放,图片开始旋转. 1.动设置图片为圆形居中,使图片一直不停旋转. 核心代码: #xuanzhuan{ -webkit-animation: play 10s linear infinite; -moz-animation: play 10s linear infinite; anima

PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题

PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题,PageSlider中加入CSS3动画的话,默认只有首屏是从无到有执行动画,其他屏都是显示下页面再执行动画 这就造成其他屏的动画展示效果不好,解决方法,让所有屏的背景可见,但是只要当前屏的元素可见; 上代码: .page { width: 100%; height: 100%; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; div, ul,

从QQ音乐开发,探讨如何利用腾讯云SDK在直播中加入视频动画

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯游戏云发表于云+社区专栏 看着精彩的德甲赛事,突然裁判一声口哨,球赛断掉了,屏幕开始自动播放"吃麦趣鸡盒,看德甲比赛"的视频广告 那么问题来了,如何在直播流中,无缝的插入点播视频文件呢? 本文介绍了QQ音乐基于腾讯云AVSDK,实现互动直播插播动画的方案以及踩过的坑. 01 从产品经理给的需求说起 "开场动画?插播广告?" 不久之前,产品同学说我们要在音视频直播中,加一个开场动画. 要播放插播动画

css3动画详解

一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后面紧跟着是动画名称加上一对花括号"{-}",括号中就是一些不同时间段样式规则. @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; }} 示例:创建一个动画名叫"changecolor",在"0%&quo

css3动画由浅入深总结

回到顶部 一:过渡动画---Transitions 一:过渡动画---Transitions 含义:在css3中,Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能. Transitions属性的使用方法如下所示: transition: property | duration  | timing-function | delay transition-property: 表示对那个属性进行平滑过渡. transition-duratio

swift版QQ音乐播放器(二)

一 完善部分的QQ音乐效果图 二 需要完善点 1 歌曲的切换和暂停播放 2 歌曲当前播放时间和歌曲总时间的更新 3 进度条的处理 4 歌手头像处理 5 头像动画效果 6 歌词的进度显示 8 完善细节 三 添加歌曲展示页面中的动画效果 1 代码书写位置 : 由于展示歌词的控制器的UITableViewController,那么我们可以使用代理方法.当用户拖动tableView的时候,会调用一个方法,在该方法中实现动画效果 2 思路 : 通过拿到第一个cell和最后一个cell来计算中间cell的索

QQ音乐/酷狗音乐锁屏控制实现原理

我实现的效果 混乱的锁屏控制 Android自4.0版本, 也就是API level 14开始, 加入了锁屏控制的功能, 相关的类是RemoteControlClient, 这个类在API level 21中被标记为deprecated, 被新的类MediaSession所替代. 我们的音乐App中最开始使用的是原生锁屏控制API, 说实话这个API不好用, 遇到了一些小坑, 最要命的是不同品牌的手机, 锁屏界面长的还不一样, 就连我自己都没见过原生4.0的锁屏控制界面是什么样的. 国内的手机厂