js+css3实现炫酷圆形彩色渐变边框音乐播放器

最新推荐文章于 2022-12-09 21:35:19 发布

m0_58281157

最新推荐文章于 2022-12-09 21:35:19 发布

阅读量415

点赞数 1

分类专栏： js 文章标签： javascript css3 前端开发语言

本文链接：https://blog.csdn.net/m0_58281157/article/details/121095166

版权

本文介绍如何利用JavaScript和CSS3技术，设计并实现一个具有炫酷圆形彩色渐变边框的音乐播放器。通过HTML构建基本结构，CSS3实现视觉效果，为前端开发提供了一个创新的应用案例。

摘要由CSDN通过智能技术生成

HTML结构部分:

<div class="container">
  <div id="glow" class="glow disable-animation">
    <div id="player">
      <span class="text">音频播放</span>
      <br>
      <span id="songName" class="text"></span>
      <br>
      <div class="playback_controls">
        <button onClick="skip('prev')">
          <i class="fa fa-fast-backward"></i>
        </button>
        <button onClick="playpause()">
          <i class="fa fa-play"></i><i class="fa fa-pause"></i>
        </button>
        <button onClick="stop()">
          <i class="fa fa-stop"></i>
        </button>
        <button onClick="skip('next')">
          <i class="fa fa-fast-forward"></i>
        </button>
      </div>
      <br>
      <div id="seekbar">
        <input type="range" οninput="setPos(this.value)" id="seek" value="0" max="">
      </div>
      <br>
      <div class="volume_controls">
        <button onClick="mute()">
          <i id="mute" class="fa fa-volume-up"></i>
        </button>
        <input type="range" id="volume" οninput="setVolume(this.value)" min="0" max="1" step="0.01" value="1">
      </div>
    </div>

    <div id="playlist" class="hide">
      <span class="text">播放列表</span>
      <div class="list-container">

        <div id="list" class="scrollbar">
          <div class="list-item">
            <div class="wrap-text"><span>/preview/1644949/2019-11-02/17_musicball/music/whkl.mp3</span></div>
            <button onClick="removeList(this)">×</button>
          </div>
          <div class&#