song.html 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <!DOCTYPE html>
  2. <html lang="zh-Hans">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>歌曲播放</title>
  6. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <link rel="stylesheet" href="css/reset.css">
  8. <link rel="stylesheet" href="css/song.css">
  9. <!-- 歌词css动画 -->
  10. <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css">
  11. </head>
  12. <body>
  13. <div class="page" id="page">
  14. <!-- logo 指针 -->
  15. <section class="pointer">
  16. <!-- <img class="logo" src="https://i.loli.net/2018/01/18/5a607ab96f850.png" alt="logo"> -->
  17. <img class="point" src="https://i.loli.net/2018/01/18/5a6076c4f1e1b.png" alt="指针">
  18. </section>
  19. <!-- 黑胶唱片 -->
  20. <section class="disk">
  21. <div class="icon-wrapper">
  22. <svg class="iconfont icon-bofang">
  23. <use xlink:href="#icon-bofang"></use>
  24. </svg>
  25. <svg class="iconfont icon-pause">
  26. <use xlink:href="#icon-pause"></use>
  27. </svg>
  28. </div>
  29. <div class="circle">
  30. <img id="bg" src="http://p1.music.126.net/vVV6_b_CfNzBfv4rVfiwOw==/109951165975303461.jpg?param=300x300" alt="封面">
  31. <!-- //i.loli.net/2017/10/08/59da11c6739ab.jpg -->
  32. </div>
  33. </section>
  34. <!-- 歌词 -->
  35. <section class="lyric">
  36. <h1></h1>
  37. <div class="word">
  38. <!-- 滑动 -->
  39. <div class="lines">
  40. <p class="active">成龙:该愤怒</p>
  41. <p class="active">成龙:该愤怒</p>
  42. <p class="active">成龙:该愤怒</p>
  43. <p class="active">成龙:该愤怒</p>
  44. <p class="active">成龙:该愤怒</p>
  45. <p class="active">成龙:该愤怒</p>
  46. <p class="active">成龙:该愤怒</p>
  47. <p class="active">成龙:该愤怒</p>
  48. <p class="active">成龙:该愤怒</p>
  49. <p class="active">成龙:该愤怒</p>
  50. <p class="active">成龙:该愤怒</p>
  51. <p class="active">成龙:该愤怒</p>
  52. <p class="active">成龙:该愤怒</p>
  53. <p class="active">成龙:该愤怒</p>
  54. <p class="active">成龙:该愤怒</p>
  55. <p class="active">成龙:该愤怒</p>
  56. <p class="active">成龙:该愤怒</p>
  57. <p class="active">成龙:该愤怒</p>
  58. <p class="active">成龙:该愤怒</p>
  59. </div>
  60. </div>
  61. </section>
  62. <!-- 链接 -->
  63. <section class="links">
  64. <a href="#">打开</a>
  65. <a class="main" href="#">下载</a>
  66. </section>
  67. </div>
  68. <script src="https://at.alicdn.com/t/font_429186_st29x7u3sd04fgvi.js"></script>
  69. <!-- 引入jquery -->
  70. <!-- <script src="vendors/jquery.min.js"></script> -->
  71. <!-- <script src="vendors/av-min.js"></script> -->
  72. <!-- <script src="js/av.js"></script> -->
  73. <!-- <script src="js/song.js"></script> -->
  74. </body>
  75. </html>