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