layui实现一个调用kugou api搜索歌曲带歌词播放效果代码-html代码-BFW代码库

layui实现一个调用kugou api搜索歌曲带歌词播放效果代码

代码语言：html

所属分类：多媒体

代码描述：layui实现一个调用kugou api搜索歌曲带歌词播放效果代码

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

<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>歌词</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="referrer" content="no-referrer" />

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

</head>
<style>
    *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
    .main{position:relative;width:100%;height:100%;}
    .main-layout,.main-title{position:absolute;left:50%;margin-left:-270px;width:460px;text-align:center}
    .main-layout{top:15%;height:374px;background:#f1f3f4}
    .main-title{top:15%;overflow:hidden;margin-top:-44px;height:44px}
    .song-name{display:inline-block;margin-left:-12px;height:inherit;line-height:44px}
    .main-panel{position:relative;clear:both;overflow:hidden;height:inherit}
    .loading{position:absolute;top:50%;left:50%;margin-top:-15px;margin-left:-15px;height:inherit}
    .bt-spinner{width:30px;height:30px;border:2px solid #ddd;border-radius:50%;background-color:transparent;border-top-color:#e4007e;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}
    .lrc-panel{position:absolute;width:448px;transition:top .5s}
    .lrc-panel p{overflow:hidden;width:100%;height:34px;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:34px;transform: scale(1)}
    .current-play{color:#e4007e;font-size:17px!important; transition: all 0.6s;}
    .scroll{position:absolute;top:0;right:0;width:8px;height:100%}
    .scroll-drag{position:relative;height:61px;border-radius:8px;background:#0c0c0c;cursor:pointer}
    .main-audio{text-align:center}
    .main-audio audio{outline:0}
    .main-search{height: 50px;background-color: rgb(22, 154, 243);cursor: pointer;}
    .search-btn{line-height: 50px;color: #fff}
    @keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}
        to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}
    }
</style>

<body>

    <div class="main">
        <div class="main-title">
            <h2 class="song-name"></h2>
        </div>
        <div class="main-layout">
            <div class="main-panel">
                <div class="loading" style="display: none;">
                    &.........完整代码请登录后点击上方下载按钮下载查看