经典留声机音乐播放器效果
代码语言:html
所属分类:多媒体
代码描述:经典留声机音乐播放器效果
下面为部分代码预览,完整代码请点击下载或在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 translate="no"> <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,46.3c-0.2,0.6-0.5,1.3-0.7,2c-0.2,0.7-0.5,1.4-0.7,2.1c-0.2,0.7-0.5,1.4-0.7,2.1 c-0.2,0.7-0.5,1.4-0.7,2h5.5L75.8,46.3z" /> <path class="st1" d="M99.3,54c0,0.9,0.1,1.6,0.4,2.3c0.2,0.6,0.6,1.1,1,1.5c0.4,0.4,0.9,0.7,1.4,0.9s1.1,0.3,1.7,0.3 c0.6,0,1.2-0.1,1.7-0.3c0.5-0.2,1-0.5,1.4-0.9c0.4-0.4,0.7-0.9,1-1.5s0.4-1.3,0.4-2.1V38.7c0-0.2,0.1-0.4,0.2-0.6 c0.1-0.2,0.4-0.2,0.6-0.2h5.3c0.3,0,0.5,0.1,0.6,0.2c0.2,0.2,0.2,0.3,0.2,0.5v15.2c0,2.1-0.3,3.9-0.9,5.3 c-0.6,1.4-1.4,2.6-2.5,3.4c-1,0.9-2.3,1.5-3.6,1.9s-2.8,0.6-4.3,0.6c-1.5,0-3-0.2-4.3-0.6c-1.4-0.4-2.6-1-3.6-1.9 c-1-0.9-1.9-2-2.5-3.5c-0.6-1.4-0.9-3.2-0.9-5.2V38.7c0-0.2,0.1-0.4,0.2-0.5c0.1-0.2,0.3-0.2,0.5-0.2h5.4c0.2,0,0.4,0.1,0.6,0.2 c0.2,0.2,0.3,0.3,0.3,0.6V54z" /> <path class="st1" d="M143.5,51.3c0,1.3-0.2,2.5-0.5,3.6c-0.3,1.1-0.8,2.2-1.4,3.2c-0.6,1-1.3,1.9-2.2,2.7 c-0.8,0.8-1.8,1.5-2.8,2.1c-1,0.6-2.1,1-3.3,1.3c-1.2,0.3-2.4,0.5-3.7,0.5h-8.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.3-0.3-0.3-0.6 V38.7c0-0.3,0.1-0.5,0.2-0.6c0.1-0.2,0.3-0.2,0.6-0.2h8.9c1.3,0,2.5,0.2,3.6,0.5s2.3,0.8,3.3,1.3c1,0.6,1.9,1.3,2.8,2.1 c0.8,0.8,1.6,1.7,2.2,2.7c0.6,1,1.1,2.1,1.4,3.2S143.5,50,143.5,51.3z M127,44.3v13.8h1.5c0.3,0,0.5,0,0.8,0c0.3,0,0.5,0,0.8-0.1 c0.9-0.1,1.7-0.3,2.5-0.7s1.5-0.8,2-1.4c0.6-0.6,1-1.3,1.4-2.1c0.3-0.8,0.5-1.7,0.5-2.6c0-1-0.2-1.9-0.6-2.8 c-0.4-0.8-0.9-1.6-1.5-2.2c-0.6-0.6-1.4-1.1-2.3-1.4c-0.9-0.3-1.8-0.5-2.8-0.5H127z" /> <path class="st1" d="M148.2,38.7c0-0.2,0.1-0.4,0.2-0.6c0.1-0.2,0.3-0.2,0.6-0.2h5.3c0.2,0,0.4,0.1,0.6,0.2s0.3,0.3,0.3,0.6v25.1 c0,0.5-0.3,0.8-0.9,0.8H149c-0.5,0-0.8-0.3-0.8-0.8V38.7z" /> <path class="st1" d="M159.8,51.3c0-1.3,0.2-2.5,0.5-3.7s0.8-2.3,1.4-3.3s1.3-2,2.2-2.8c0.8-0.8,1.8-1.6,2.8-2.2 c1-0.6,2.1-1.1,3.3-1.4s2.4-0.5,3.7-0.5c1.3,0,2.5,0.2,3.7,0.5s2.3,0.8,3.3,1.4c1,0.6,2,1.3,2.8,2.2c0.8,0.8,1.6,1.8,2.2,2.8 c0.6,1,1.1,2.1,1.4,3.3s0.5,2.4,0.5,3.7s-0.2,2.5-0.5,3.7c-0.3,1.2-0.8,2.3-1.4,3.3c-0.6,1-1.3,1.9-2.2,2.8 c-0.8,0.8-1.8,1.6-2.8,2.2c-1,0.6-2.1,1.1-3.3,1.4c-1.2,0.3-2.4,0.5-3.7,0.5c-1.3,0-2.5-0.2-3.7-0.5c-1.2-0.3-2.3-0.8-3.3-1.4 c-1-0.6-1.9-1.3-2.8-2.2s-1.6-1.8-2.2-2.8s-1.1-2.1-1.4-3.3C159.9,53.8,159.8,5.........完整代码请登录后点击上方下载按钮下载查看
网友评论0