导语:
修改发表于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
信纸作者:亚伦影音工作室
请选择你想添加的收藏夹