jquery+svg实现老式碟片机留声机音乐播放器代码

代码语言:html

所属分类:多媒体

代码描述:jquery+svg实现老式碟片机留声机音乐播放器代码

代码标签: jquery svg 老式 碟片机 留声机 音乐 播放器 代码

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

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

<head>
   
<meta charset="UTF-8">
   
<style>
       
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700');
    html
, body{
     
background: #fff;
     
width: 100%;
     
height: 100%;
     
position: relative;
     
margin: 0;
     
padding: 0;
     
overflow-x: hidden;
   
}
   
.audio-container{
     
position: absolute;
     
top: 50%;
     
width: 100%;
     
transform: translateY(-50%);
   
}
   
.audiosvg-container{
       
position: relative;
   
}
   
.play-text{
     
position: absolute;
     
left: 50%;
     
top: 0;
     
transform: translateX(-50%);
     
font-size: 35px;
       
font-family: 'Montserrat', sans-serif;
     
letter-spacing: 1px;
   
/*   text-transform: uppercase; */
     
color: #1A478C;
     
opacity: 0;
     
visibility: hidden;
   
}
   
.pause-text{
     
position: absolute;
     
left: 50%;
     
top: 0;
     
transform: translateX(-50%);
     
font-size: 35px;
       
font-family: 'Montserrat', sans-serif;
     
letter-spacing: 1px;
   
/*   text-transform: uppercase; */
     
color: #486CA3;
     
opacity: 0;
     
visibility: hidden;
   
}
   
.active-box{
       
width: 40%;
     
max-width: 350px;
       
height: 100%;
       
position: absolute;
       
top: 0;
       
left: 50%;
       
transform: translateX(-50%);
       
-webkit-transform: translateX(-50%);
       
-ms-transform: translateX(-50%);
       
display: none;
   
}
   
.audiosvg{
       
width: 40%;
       
max-width: 300px;
     
max-height: 50vh;
     
margin: auto;
     
display: block;
   
}
   
#hover-circle .st4{
       
transition: all 0.25s;
   
}
   
#ripple-circle circle{
       
opacity: 0.5;
   
}
   
.audio-overlay{
       
width: 100%;
       
height: 100%;
       
position: relative;
       
background-color: #fff;
       
z-index: 100;
       
bottom: 0;
   
}
   
@media screen and (max-width: 768px) {
       
.js-video {
               
border: none;
       
}
       
.slideshow ul li {
           
padding: 0;
       
}
       
.info-container p {
           
text-align: center;
       
}
       
.video-container{
               
padding: 20px 20px 8vh 20px;
       
}
       
.audio-container{
               
padding: 8vh 20px 20px 20px;
       
}
   
}
   
@media screen and (max-width: 480px) {
       
.circle {
           
width: 4px;
           
height: 4px;
           
margin: 2px 4px;
       
}
       
#videosvg, .audiosvg {
           
width: 66%;
       
}
       
.dialog__content {
               
width: 80% !important;
           
padding: 10px !important;
       
}
       
.dialog__content button {
           
border-radius: 0 !important;
           
height: 30px !important;
       
}
       
.qingli-logo {
           
width: 36px;
           
height: 36px;
           
top: 15px;
           
right: -10px;
       
}
   
}
   
</style>

</head>

<body>

   
<div class="audio-container">
       
<div class="audiosvg-container">
           
<h1 class="play-text">play</h1>
           
<h1 class="pause-text">pause</h1>
           
<div class="active-box" onclick="pauseAudio()"></div>
           
<svg class="audiosvg" onclick="playAudio()" viewBox="0 0 250 250" style="enable-background:new 0 0 250 250;" xml:space="preserve">
     
<style type="text/css">
                                                               
.st0{fill:none;stroke:#486CA3;stroke-width:5.6943;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
                                                                               
.st1{fill:#7691BA;}
                                                                               
.st2{fill:none;stroke:#1A478C;stroke-width:5.8983;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
                                                                               
.st3{fill:#1A478C;}
                                                                               
.st4{fill:#486CA3;}
                                                                               
.st5{fill:none;stroke:#1A478C;stroke-width:7.5924;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
                                                                               
.st6{fill:#FFFFFF;}
                                                                               
.st7{fill:none;stroke:#7691BA;stroke-width:13.2866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
                                                                               
.st8{fill:none;stroke:#486CA3;stroke-width:4.4082;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
                                                                               
.st9{fill:none;stroke:#fff;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
                                                                       
</style>
     
<g>
       
<g>
          <path class="st1" d="M72.5,38.6c0-0.1,0.1-0.1,0.1-0.2c0.1-0.1,0.1-0.2,0.2-0.2c0.1-0.1,0.2-0.1,0.3-0.2c0.1,0,0.2-0.1,0.3-0.1
                                                                                                        h4.6c0.2,0,0.4,0.1,0.5,0.2c0.1,0.1,0.3,0.2,0.3,0.3l0.5,1l9.5,24.4c0.1,0.2,0.1,0.4-0.1,0.6c-0.1,0.2-0.4,0.2-0.7,0.2h-5.2
                                                                                                        c-0.3,0-0.5-0.1-0.6-0.2c-0.2-0.1-0.3-0.3-0.4-0.5c-0.2-0.6-0.5-1.2-0.7-1.8c-0.2-0.6-0.5-1.2-0.7-1.8H71
                                                                                                        c-0.2,0.6-0.5,1.2-0.7,1.8c-0.2,0.6-0.5,1.2-0.7,1.8c-0.2,0.4-0.5,0.7-0.9,0.7h-5.3c-0.2,0-0.4-0.1-0.6-0.2
                                                                                                        c-0.2-0.1-0.2-0.3-0.1-0.5L72.5,38.6z M75.8.........完整代码请登录后点击上方下载按钮下载查看

网友评论0