plyr实现简洁声音音乐播放器代码

代码语言:html

所属分类:多媒体

代码描述:plyr实现简洁声音音乐播放器代码

代码标签: plyr 音乐 播放器 声音

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/plyr.min.css">

    <style>
        .wrapper {
          margin: 100px auto;
          width: 400px;
        }
        
        .plyr--audio .plyr__controls {
          background-color: #D6DEE6;
          padding: 0;
          border-radius: 25px;
          height: 50px;
        }
        
        .plyr--audio .plyr__control {
          width: 50px;
          height: 50px;
          background-color: #38A9F6;
          border-radius: 100%;
          transition: all 0.4s ease;
        }
        .plyr--audio .plyr__control:hover {
          transform: scale(1.05);
        }
        .plyr--audio .plyr__control svg {
          margin: auto;
          fill: #fff;
        }
        
        .plyr--audio .plyr__progress {
          margin: 0 24px;
          left: 0;
        }
        
        .plyr--full-ui input[type=range]::-webkit-slider-thumb {
          opacity: 0;
          transform: scale(0);
          transition: all 0.2s ease;
          height: .........完整代码请登录后点击上方下载按钮下载查看

网友评论0