花样歌词（六）：上下左右移动

 

 

 

代码：

<style type="text/css">.移 {
        display: block;
        margin: 0px 60px;
     position: relative;
        animation: spin 10s linear infinite;
         animation-delay: 3.5s;/*延迟时间*/                                                                           
      animation-iteration-count:infinite ;/*循环次数*/                                                             
      animation-duration: 20s;/*歌词一个周期的持续时间*/ 

    }

    @keyframes spin {
        

-0% { transform: translate(2%,0%)scale(1.0)rotateX(0deg)rotateY(0deg);}
        
15% { transform: translate(-23%,0%)scale(1.0)rotateX(0deg)rotateY(0deg);}
35% { transform: translate(23%,0%)scale(1.0)rotateX(0deg)rotateY(0deg);}
55% { transform: translate(2%,0%)scale(1.0)rotateX(0deg)rotateY(0deg);}

75% { transform: translate(2%,-23%)scale(1.0)rotateX(0deg)rotateY(0deg);}
95% { transform: translate(2%,23%)scale(1.0)rotateX(0deg)rotateY(0deg);}
    }
</style>
<div class="移">
<div style="margin-top:0px;  margin-left:0px;">此处文字用播放器代码替换</div>
</div>

说明：

放置播放器位置，修改定位代码margin-top:0px;  margin-left:0px中的0px值。