css+js实现可放大缩小的音乐播放器效果代码
代码语言：html
所属分类：多媒体
代码描述：css+js实现可放大缩小的音乐播放器效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
* {
border:none;
margin:0;
padding:0;
}
ul,ol {
list-style:none;
}
a {
text-decoration:none;
}
.audio {
position:relative;
margin:auto;
top:50px;
height:445px;
width:300px;
overflow:hidden;
transition:all .5s;
border-radius:20px;
background:linear-gradient(rgba(144,54,124,0.5) 0,rgba(241,152,156,0.5) 445px);
}
.audio-off {
height:50px;
width:250px;
border-radius:10px;
}
.audio-head {
position:absolute;
margin:auto;
width:100%;
height:50px;
}
.add {
position:relative;
width:80%;
height:50px;
}
.min-time {
position:absolute;
width:0;
opacity:1;
height:4px;
margin-top:-4px;
background:rgba(244,234,255,0.4);
transition:all .5s;
}
.min-time-off {
width:0;
opacity:0;
}
.audio-head-tittle {
height:100%;
line-height:50px;
color:aquamarine;
font-size:23px;
font-weight:bold;
font-family:微软雅黑;
text-align:center;
transition:all .5s;
}
.audio-head-tittle-text {
width:90%;
margin-left:5%;
text-overflow:clip;
word-break:keep-all;
white-space:nowrap;
overflow:hidden;
}
.audio-head-tittle-text-off {
width:60%;
margin-left:20%;
}
.audio-head-tittle-text-out {
font-size:23px;
display:none;
}
.audio-head-tittle-text-out-a {
font-size:20px;
display:none;
}
.audio-head-tittle-by {
margin:auto;
height:50%;
line-height:50px;
color:#de9fff;
font-size:15px;
font-weight:bold;
font-family:微软雅黑;
text-align:center;
opacity:0;
transition:all .5s;
}
.audio-head-tittle-by-off {
opacity:1;
}
.audio-head-tittle-off {
width:100%;
height:50%;
font-size:20px;
}
.audio-img {
position:relative;
width:100%;
height:300px;
margin-top:-40px;
}
#audio-img-canvas {
margin:50px 50px;
background:rgba(0,0,255,0);
transition:all 1s;
}
.audio-img-canvas-on {
animation:img-cover 2.5s linear infinite .5s;
}
@keyframes img-cover {
from {
transform:rotate(0)
}
to {
transform:rotate(360deg)
}
}.audio-img-cover {
position:absolute;
width:90px;
height:90px;
top:50%;
left:50%;
margin-top:-45px;
margin-left:-45px;
border-radius:50%;
background:url("//repo.bfw.wiki/bfwrepo/image/600d6d2fbc572.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90") no-repeat center;
background-size:90px 90px;
transition:all .5s;
}
.audio-img-cover-off {
position:absolute;
width:40px;
height:40px;
top:50%;
left:50%;
margin-top:-155px;
margin-left:-125px;
background-size:40px 40px;
}
#audio-img-canvas-play {
position:absolute;
background:rgba(0,0,255,0);
left:235px;
top:40px;
transform-origin:top;
cursor:pointer;
}
.audio-img-canvas-play-off {
transition:all .5s;
transform:rotate(10deg);
}
.audio-img-canvas-play-on {
transition:all .5s;
transform:rotate(23deg);
}
.audio-text {
display:none;
}
.audio-by {
position:relative;
margin-top:-25px;
width:100%;
height:50px;
}
.audio-by-all {
position:relative;
margin:auto;
width:100%;
height:7px;
background:rgba(255,255,255,0.8);
cursor:pointer;
}
.audio-by-now {
display:block;
width:0;
height:100%;
transition:all .3s linear;
background:#bd428c;
}
.audio-by-text {
width:100%;
height:20px;
}
.audio-by-text-now,.audio-by-text-all {
display:block;
height:20px;
line-height:20px;
font-size:15px;
color:white;
}
.audio-by-text-now {
float:left;
margin-left:5%;
}
.audio-by-text-all {
float:right;
margin-right:5%;
}
.audio-btn {
position:relative;
margin:auto;
width:90%;
height:100px;
margin-top:-20px;
}
.audio-btn-list {
display:inline-block;
float:left;
width:36px;
height:36px;
margin:32px 4px;
cursor:pointer;
transition:all .5s;
}
.audio-btn-list-on {
background:url("//repo.bfw.wiki/bfwrepo/images/musicplayer/cycle.png") no-repeat center;
background-size:36px 36px;
}
.audio-btn-list-off {
background:url("//repo.bfw.wiki/bfwrepo/images/musicplayer/cycle.png") no-repeat center;
background-size:36px 36px;
}
.audio-btn-before {
display:inline-block;
float:left;
background:url("//repo.bfw.wiki/bfwrepo/images/musicplayer/prev.png") no-repeat center;
width:36px;
height:36px;
background-size:36px 36px;
margin:32px 4px;
cursor:pointer;
}
.audio-btn-sound {
display:inline-block;
width:36px;
height:36px;
float:right;
background:url("//repo.bfw.wiki/bfwrepo/images/musicplayer/volume.png") no-repeat center;
background-size:36px 36px;
margin:32px 4px;
cursor:pointer;
}
.audio-btn-next {
display:inline-block;
width:36px;
height:36px;
float:right;
background:url("//repo.bfw.wiki/bfwrepo/images/musicplayer/next.png") no-repeat center;
background-size:36px 36px;
margin:32px 4px;
cursor:pointer;
}
.audio-btn-play {
position:absolute;
width:70px;
height:70px;
top:50%;
margin-top:-35px;
left:50%;
margin-left:-35px;
transition:all .5s;
cursor:pointer;
}
.audio-btn-play-off {
background:url("//repo.bfw.wiki/bfwrepo/images/musicplayer/pause.png") no-repeat center;
background-size:70px 70px;
}
.audio-btn-play-on {
background:url("//repo.bfw.wiki/bfwrepo/images/musicplayer/play.png") no-repeat center;
background-size:70px 70px;
}
.audio-btn-play-off-a {
position:absolute;
width:40px;
height:40px;
top:50%;
margin-top:-360px;
left:50%;
margin-left:85px;
cursor:pointer;
background-size:40px 40px;
}
.audio-sound {
height:6px;
width:0;
margin-left:5%;
position:relative;
opacity:0;
overflow:hidden;
transition:all .5s;
}
.audio-sound-on {
width:90%;
opacity:1;
overflow:visible;
}
.audio-sound-all {
position:relative;
margin:auto;
width:100%;
height:6px;
background:rgba(255,255,255,0.5);
border-radius:5px;
cursor:pointer;
}
.audio-sound-now {
display:block;
height:100%;
background:rgb(244,234,255);
border-radius:5px;
}
.audio-sound-art {
display:block;
position:absolute;
margin-top:-11px;
margin-left:-8px;
width:16px;
height:16px;
border-radius:50%;
background:rgb(244,234,255);
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="audio" class="audio audio-off"><audio id="audio-my" src="//repo.bfw.wiki/bfwrepo/sound/5c89fd22dea6948307.mp3" preload="metadata"></audio>
<div class="audio-head">
<div class="audio-head-tittle">
<div class="audio-head-tittle-text audio-head-tittle-text-off"></div>
</div>
<div class="audio-head-tittle-by"></div>
</div>
<div class="add"></div>
<div class="min-time"></div>
<div class="audio-img"><canvas id="audio-img-canvas" width="200px" height="200px"></canvas>
<div class="audio-img-cover audio-img-cover-off"></div><canvas id="audio-img-canvas-play" class="audio-img-canvas-play-off" width="45px" height="200px"></canvas></div>
<div class="audio-text">歌词待更新</div>
<div class="audio-by">
<div class="audio-by-all"><span class="audio-by-now"></span></div>
<div class="audio-by-text"><span class="audio-by-text-now">00:00</span><span class="audio-by-text-all">00:00</span></div>
</div>
<div class="audio-btn">
<div class="audio-btn-list audio-btn-list-off"></div>
<div class="audio-btn-before"></div>
<div class="audio-btn-play audio-btn-play-off audio-btn-play-off-a"></div>
<div class="audio-btn-sound"></div>
<div class="audio-btn-next"></div>
</div>
<div class="audio-sound">
<div class="audio-sound-all"><span class="audio-sound-now"></span><span class="audio-sound-art"></span></div>
</div>
</div>
<a class="audio-head-tittle-text-out"></a>
<a class="audio-head-tittle-text-out-a"></a>
<script type="text/javascript">
$(function() {
var a = document.getElementById("audio-my");
var f = false;
var d = false;
var e = ["m1", "m2"];
var b = 0;
var h = new Array();
var c = false;
var n = 0;
var g = 1.8;
h = e[0].split("-");
$(".audio-head-tittle-text").text(h[1]);
$(".audio-head-tittle-text-out").text(h[1]);
.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0