文字滚动效果，歌词滚动

@[TOC]文字滚动效果，歌词滚动

在这里插入代码片
<template>
	<view>
		<view class="lyrics-container">
		  <view class="lyrics">
		    <span class="line">Verse 1 lyrics</span>
		    <span class="line">Chorus lyrics</span>
		    <span class="line">Verse 2 lyrics</span>
		    <span class="line">Chorus lyrics</span>
		  </view>
		</view>
	</view>
</template>

<style lang="scss">
	.lyrics-container {
	  overflow: hidden;
	  height: 4em; /* 歌词显示的高度 */
	}
	
	.lyrics {
	  position: relative;
	  top: 0;
	  animation: scroll 10s linear infinite;
	}
	
	.line {
	  display: block;
	  height: 1em; /* 每行歌词的高度 */
	}
	
	@keyframes scroll {
	  0% {
	    top: 0;
	  }
	  100% {
	    top: -8em; /* 每行歌词的高度乘以歌词行数，这里是4*2=8 */
	  }
	}


</style>