js实现一个悬浮可展开的迷你音乐播放器效果代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：js实现一个悬浮可展开的迷你音乐播放器效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
    	margin:0;
    	padding:0;
    	background:#355260;
    }
    .circle {
    	position:absolute;
    	top:50%;
    	left:50%;
    	transform:translate(-50%,-50%);
    	width:80px;
    	height:80px;
    	border-radius:50%;
    }
    .imgs {
    	position:absolute;
    	height:100%;
    	width:100%;
    	border-radius:50px;
    	background:url("//repo.bfw.wiki/bfwrepo/image/5ef9ef9fbf5b0.png") no-repeat;
    	background-size:100%;
    }
    .circle .share {
    	position:relative;
    	height:100%;
    	width:100%;
    	line-height:80px;
    	text-align:center;
    	color:#fff;
    	border-radius:50%;
    	z-index:1;
    	box-shadow:0 0 0 2px #112833;
    }
    .circle ul {
    	position:absolute;
    	top:-58px;
    	left:-58px;
    	margin:0;
    	padding:0;
    	width:200px;
    	height:200px;
    	border-radius:50%;
    	transition:.7s;
    	z-index:-1;
    	transform:scale(.3) rotate(-180deg);
    	opacity:0;
    }
    .circle:hover ul {
    	transform:scale(1) rotate(0deg);
    	opacity:1;
    }
    .circle ul li {
    	position:absolute;
    	list-style:none;
    }
    .circle ul li:nth-child(1) {
    	top:6px;
    	left:50%;
    	transform:translate(-50%);
    }
    .circle ul li:nth-child(2) {
    	bottom:6px;
    	left:50%;
    	transform:translateX(-50%);
    }
    .circle ul li:nth-child(3) {
    	left:6px;
    	top:50%;
    	transform:translateY(-50%);
    }
    .circle ul li:nth-child(4) {
    	right:6px;
    	top:50%;
    	transform:translateY(-50%);
    }
    #yl {
    	display:block;
    	position:absolute;
    	background-color:rgba(0,0,0,0.3);
    	width:22px;
    	height:65px;
    	bottom:50px;
    	left:15px;
    	transform:rotate(180deg);
    	transition:.5s;
    	text-align:center;
    	opacity:0;
    }
    .circle ul li:nth-child(1):hover #yl {
    	opacity:1;
    }
    #yi {
    	display:block;
    	position:absolute;
    	margin:0;
    	padding:0;
    	background-color:rgba(255,255,255,0.3);
    	width:4px;
    	height:40px;
    	top:6px;
    	left:50%;
    	transform:translateX(-50%);
    	cursor:pointer;
    	border-radius:3px;
    }
    #yn {
    	display:block;
    	position:absolute;
    	margin:0;
    	padding:0;
    	background-color:#58a0c3;
    	width:4px;
    	height:42px;
    	left:50%;
    	transform:translateX(-50%);
    	top:0px;
    	transition:.3s;
    	border-radius:4px;
    	cursor:pointer;
    }
    .bol {
    	display:block;
    	position:absolute;
    	width:8px;
    	height:8px;
    	left:50%;
    	transform:translateX(-50%);
    	top:40px;
    	background-color:#58a0c3;
    	border-radius:50%;
    	z-index:-1;
    	transition:.3s;
    	cursor:pointer;
    }
    .ytext {
    	display:block;
    	position:absolute;
    	height:15px;
    	width:100%;
    	bottom:0;
    	font-size:11px;
    	transform:rotate(180deg);
    }
    button {
    	margin:0;
    	padding:0;
    	border:none;
    	outline:none;
    	width:50px;
    	height:50px;
    	border-radius:50%;
    	cursor:pointer;
    	background-color:rgba(0,0,0,0);
    }
    #star {
    	position:relative;
    	top:18%;
    }
    .icon {
    	display:inline-block;
    	width:40px;
    	height:40px;
    	overflow:hidden;
    }
    .share:hover .icon-star {
    	background:url("//repo.bfw.wiki/bfwrepo/images/music/actions.png") no-repeat center;
    	background-size:99% 99%;
    	opacity:1;
    }
    .icon-star {
    	opacity:0;
    }
    .icon-yin {
    	background:url("//repo.bfw.wiki/bfwrepo/image/60d575b15ba53.png") no-repeat center;
    	background-size:99% 99%;
    }
    .icon-lef {
    	background:url("//repo.bfw.wiki/bfwrepo/images/music/ups.png") no-repeat center;
    	background-size:100% 100%;
    }
    .icon-rig {
    	background:url("//repo.bfw.wiki/bfwrepo/images/music/dows.png") no-repeat center;
    	background-size:100% 100%;
    }
    .icon-lis {
    	background:url("//repo.bfw.wiki/bfwrepo/images/music/ml.png") no-repeat center;
    	background-size:100% 100%;
    }
    .icon > .icon {
    	position:relative;
    	left:-40px;
    	border-right:40px solid transparent;
    	filter:drop-shadow(40px 0 0 #9976ff);
    	margin-right:2px;
    }
    .icon > .icon:hover {
    	filter:drop-shadow(40px 0 0 #f091ff);
    }
    .circle ul li:nth-child(2):hover #musicLists {
    	width:50px;
    }
    #musicLists {
    	position:absolute;
    	height:58px;
    	width:0px;
    	background-color:#6c78ad;
    	right:45px;
    	top:-5px;
    	border-radius:5px;
    	color:#b08cff;
    	overflow:hidden;
    	font-size:10px;
    	transition:.5s;
    }
    #ls {
    	top:4px;
    	left:2px;
    	position:absolute;
    	background-color:#4d5881;
    	border-radius:3px;
    	height:50px;
    	width:45px;
    	z-index:5;
    }
    #ls div {
    	position:relative;
    	box-sizing:border-box;
    	top:5px;
    	margin-bottom:3px;
    	padding-left:3px;
    	font-size:8px;
    	width:45px;
    	height:8px;
    	line-height:8px;
    	overflow:hidden;
    	list-style:none;
    	text-align:left;
    }
    </style>

</head>

<body>

    <audio id="music" preload="metadata">
        <source src="//repo.bfw.wiki/bfwrepo/sound/5c89fd22dea6948307.mp3" type="audio/mpeg">
    </audio>

    <div class="circle">
        <div class="imgs"></div>
        <div class="share">
            .........完整代码请登录后点击上方下载按钮下载查看