.titlebox{ height:210px;overflow:hidden;}
#home{
      position: relative;}
#header{ background:none;}
.action-button{
            position: relative;
            width: 100px;
            height: 100px;
            font-size: 25px;
            color: #FFF;
            text-decoration: none;
            cursor: pointer;
           display:inline-block;
        }
        .heart1,.star1,.heartTwo,.starTwo,.heartThree,.starThree{
            width: 100px;
            height: 100px;
            background-repeat: no-repeat;
            background-position: 0 0;
        }
        .heart1{ background-image: url("https://images.cnblogs.com/cnblogs_com/youku/1023863/o_heart-sprite.png");
            -webkit-animation: animate 1s steps(28) infinite;
                    animation: animate 1s steps(28) infinite;
        }
        .star1{
	background-image: url("https://images.cnblogs.com/cnblogs_com/youku/1023863/o_star-sprite.png");
            -webkit-animation: animate 1s steps(28) infinite;
                    animation: animate 1s steps(28) infinite;
        }

        .heartTwo{ background-image: url("https://images.cnblogs.com/cnblogs_com/youku/1023863/o_heart-sprite.png");
            -webkit-animation: animateTwo 1s infinite step-start;
                    animation: animateTwo 1s infinite step-start;
        }
        .starTwo{
	background-image: url("https://images.cnblogs.com/cnblogs_com/youku/1023863/o_star-sprite.png");
            -webkit-animation: animateTwo 1s infinite step-start;
                    animation: animateTwo 1s infinite step-start;
        }
        .heartThree{
            background-image: url("https://images.cnblogs.com/cnblogs_com/youku/1023863/o_heart-sprite.png");
            -webkit-animation: animate 1s steps(28);
                    animation: animate 1s steps(28);
        }
        .starThree{
	background-image: url("https://images.cnblogs.com/cnblogs_com/youku/1023863/o_star-sprite.png");
            -webkit-animation: animate 1s steps(28);
                    animation: animate 1s steps(28);
        }

        .starThree:hover,
        .starThree:active{
            background-position: -2800px 0;
            -webkit-transition: background 1s steps(28);
                    transition: background 1s steps(28);
        }

        .heartThree:hover,
        .heartThree:active{
            background-position: -2800px 0;
            -webkit-transition: background 1s steps(28);
                    transition: background 1s steps(28);
        }
    
        /* steps(28) 分步过渡 */
        @keyframes animate {
            from {
                background-position: 0 0;
            }
            to {
                background-position: -2800px 0;
            }
        }
        @-webkit-keyframes animate {
            from {
                background-position: 0 0;
            }
            to {
                background-position: -2800px 0;
            }
        }
        
        /* step-start */
        @keyframes animateTwo {
            0%   {  background-position: 0 0; }
            3.4% {  background-position: -100px 0; }
            6.8% {  background-position: -200px 0; }
            10.2%{  background-position: -300px 0; }
            13.6%{  background-position: -400px 0; }
            17%  {  background-position: -500px 0; }
            20.4%{  background-position: -600px 0; }
            23.8%{  background-position: -700px 0; }
            27.2%{  background-position: -800px 0; }
            30.6%{  background-position: -900px 0; }
            34%  {  background-position: -1000px 0; }
            37.4%{  background-position: -1100px 0; }
            40.8%{  background-position: -1200px 0; }
            44.2%{  background-position: -1300px 0; }
            47.6%{  background-position: -1400px 0; }
            51%  {  background-position: -1500px 0; }
            54.4%{  background-position: -1600px 0; }
            57.8%{  background-position: -1700px 0; }
            61.2%{  background-position: -1800px 0; }
            64.6%{  background-position: -1900px 0; }
            68%  {  background-position: -2000px 0; }
            71.4%{  background-position: -2100px 0; }
            74.8%{  background-position: -2200px 0; }
            78.2%{  background-position: -2300px 0; }
            81.6%{  background-position: -2400px 0; }
            85%  {  background-position: -2500px 0; }
            88.4%{  background-position: -2600px 0; }
            91.8%{  background-position: -2700px 0; }
            95.2%{  background-position: -2800px 0; }
            100% {  background-position: 0 0; }
        }
        @-webkit-keyframes animateTwo {
            0%   {  background-position: 0 0; }
            3.4% {  background-position: -100px 0; }
            6.8% {  background-position: -200px 0; }
            10.2%{  background-position: -300px 0; }
            13.6%{  background-position: -400px 0; }
            17%  {  background-position: -500px 0; }
            20.4%{  background-position: -600px 0; }
            23.8%{  background-position: -700px 0; }
            27.2%{  background-position: -800px 0; }
            30.6%{  background-position: -900px 0; }
            34%  {  background-position: -1000px 0; }
            37.4%{  background-position: -1100px 0; }
            40.8%{  background-position: -1200px 0; }
            44.2%{  background-position: -1300px 0; }
            47.6%{  background-position: -1400px 0; }
            51%  {  background-position: -1500px 0; }
            54.4%{  background-position: -1600px 0; }
            57.8%{  background-position: -1700px 0; }
            61.2%{  background-position: -1800px 0; }
            64.6%{  background-position: -1900px 0; }
            68%  {  background-position: -2000px 0; }
            71.4%{  background-position: -2100px 0; }
            74.8%{  background-position: -2200px 0; }
            78.2%{  background-position: -2300px 0; }
            81.6%{  background-position: -2400px 0; }
            85%  {  background-position: -2500px 0; }
            88.4%{  background-position: -2600px 0; }
            91.8%{  background-position: -2700px 0; }
            95.2%{  background-position: -2800px 0; }
            100% {  background-position: 0 0; }
        }