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