原生js+css实现音乐歌词跟随音乐播放滚动动画效果代码-html代码-BFW代码库

原生js+css实现音乐歌词跟随音乐播放滚动动画效果代码

代码语言：html

所属分类：多媒体

代码描述：原生js+css实现音乐歌词跟随音乐播放滚动动画效果代码。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
        * {
      margin: 0;
      padding: 0;
    }
    
    html,
    body {
      background: #000;
      color: #666;
      text-align: center;
    }
    
    audio {
      width: 30vw;
      outline: none;
      margin: 30px 0;
    }
    
    .container {
      height: 56vh;
      overflow: hidden;
    }
    
    ul {
      list-style: none;
      /* 不推荐使用 margin-top 来实现歌词向上滚动效果，会改变布局几何信息，从而引发浏览器的重新渲染，导致性能降低（几何信息改变是在浏览器主线程渲染的） */
      /* margin-top: -190px; */
      /* 推荐使用 transform ，因为 transform 是在其他线程进行渲染绘制的，不会影响主线程，性能较高 */
      /* transform: translateY(-190px); */
      transition: 0.6s;
    }
    
    .container ul>li {
      height: 30px;
      line-height: 30px;
      transition: 0.6s;
    }
    
    .container ul&.........完整代码请登录后点击上方下载按钮下载查看