亚伦影音工作室 的个人主页 注册

【原创】花样同步歌词【综合型】

导语:

修改
字体调整: | |

发表于2020年08月17号 11点 阅读 6390 评论2 点赞16 ©著作权归作者所有

 

代码指南:

<*div style="z-index: 0;  position: absolute;margin-top:-390px;  margin-left:60px;height: 300px;">
<*style type="text/css">.移 {
        display: block;
        position: relative;
        animation: spin 12s linear infinite;
         animation-delay: 1.5s;/*延迟时间*/                                                                           
      animation-iteration-count:infinite ;/*循环次数*/                                                             
      animation-duration: 15s;/*歌词一个周期的持续时间*/ 

    }

    @keyframes spin {
        15%   {
            transform: translate(-50px,-140px)scale(0.6)rotateX(60deg)rotateY(360deg);
        }
        95% { 
            transform: translate(90px,120px)scale(1.3)rotateX(-360deg)rotateY(20deg);
        }
    }
<*/style>
<*div class="移">同步歌词播放器代码
<*/div>

注:////////<*div style="z-index: 0;  position: absolute;margin-top:-390px;  margin-left:60px;height: 300px;">

用来给播放器代码定位。///////

////////@keyframes spin {
        15%   {
            transform: translate(-50px,-140px)scale(0.6)rotateX(60deg)rotateY(360deg);
        }
        95% { 
            transform: translate(90px,120px)scale(1.3)rotateX(-360deg)rotateY(20deg); }
        }

红色部分左右上下调试;紫色部分大小调试;黄色部分绕x轴旋转;绿色部分绕y轴旋转;任意调动就能有不同效果!///////

 

温馨提示:之前的样式都包括在这个代码里,不要的可以删去或者设置为0!

例如:由远而近设置为@keyframes spin {
        15%   {
            transform: translate(0px,0px)scale(0.6)rotateX(0deg)rotateY(0deg);
        }
        95% { 
            transform: translate(0px,0px)scale(1.3)rotateX(0deg)rotateY(0deg);  }
        }

总之根据自己喜欢调试。点击彩云归http://www.oldkids.cn/blog/view.php?bid=1503593

(注:您的设备不支持flash)

信纸作者:亚伦影音工作室

声明:以上内容仅用户个人行为,不代表本站(老小孩社区)观点,如有侵权或其他行为用户自己承担相关责任与本站无关。【举报文章】
点赞16 收藏 4 推送到圈子 分享
微信扫二维码分享

等16人点赞

评论字体大小调节: | |

精选留言

您需要登录后才能回复

登录立即注册

请选择你想添加的收藏夹

新建收藏夹

收藏夹名称

©2017 老小孩网站版权所有 | 沪ICP备08012383号    举报电话:021-64323922
×
×