2021-05-18

制作歌词动画

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：css、js

作者：LD天使

撰写时间：2021/5/3

*采用软件：DW

新人执笔，用词不当，请多指教；

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1. 庞大的王国也是从零开始，我们本篇代码也要从创建div元素开始；在div里分别用一个文字标签包裹歌词的每一句文字，这一步不难，但是很麻烦需要一点耐心；

（这里我是用<p>标签包裹歌词的）

 

2.给元素设置样式，text-align一定要设置center属性，这一步很关键，让每一句歌词居中显示，否则页面上的歌词会靠左显示；

 

 

创建好之后，浏览器页面上的效果如图所示：

3.在JS获取目标元素，然后创建一个定时器，让目标元素每隔一定的时间让它自己的滚动条向下滚动一定的像素，这个像素与上一步给目标元素设置的行高一致；

（这里因为上一步给目标元素设置了overflow: hidden属性，所以页面上不会显示滚动条。除非元素的高度大于一屏的高度。）

 

4.回到CSS样式表，创建给文字标签调用的动画；

 

5.我们在JS的定时器中调用动画，具体操作如下图；

（如果不知道自己一共写了多少句歌词，也就是文字标签的长度，可以在控制台打印我们获取的文字标签的长度，让浏览器告诉我们答案）

 

这样歌词动画就制作好了；

 

同学们也可以根据自己的爱好进行改制，欢迎在评论区讨论。