jquery ui实现圆形音乐播放器效果

代码语言:html

所属分类:多媒体

代码描述:jquery ui实现圆形音乐播放器效果

代码标签: 圆形 音乐 播放器 效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/jquery-ui.css">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
html, body { width: 100%; height: 100% }
body { background: linear-gradient(to bottom, #238999, #313C60) }

.music-player { position: absolute !important; top: 50%; left: 50%; margin: -207px 0 0 -207px }

.music-player
{
  position: relative;
  width: 415px;
  height: 415px;
  overflow: hidden;
  background: #252C36;
  border-radius: 50%;
  box-shadow: 0 1px 13px rgba(0, 0, 0, .55);
  user-select: none;
}

.music-player > .album
{
  position: absolute;
  top: -25%;
  width: 100%;
  height: auto;
  min-height: 415px;
}

.music-player > .dash
{
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 300px;
  background: url('data:image/png;base64,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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0