audioplayer实现一个响应式且支持触摸操作音频播放器效果代码
代码语言:html
所属分类:多媒体
代码描述:audioplayer实现一个响应式且支持触摸操作音频播放器效果代码
代码标签: 响应 式且 支持 触摸 操作 音频 播放器 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="Demo of Audio Player: Responsive and Touch-friendly" /> <meta name="robots" content="all"> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> html { font-size: 100%; } body { font-family: 'Noticia Text', serif; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body, a, a:hover { color: #111; } a { -webkit-transition: color .3s ease; -moz-transition: color .3s ease; -ms-transition: color .3s ease; -o-transition: color .3s ease; transition: color .3s ease; } a, a:hover { text-decoration: none; } /* AD */ #ad { width: 150px; background-color: #fff; background-color: rgba( 255, 255, 255, .5 ); overflow: hidden; position: fixed; z-index: 1000; top: 10px; left: 10px; padding: 10px; } #ad.dark { background-color: #111; background-color: rgba( 0, 0, 0, .5 ); } #bsap_aplink { width: 100%; font-size: 14px; font-family: 'Cabin Condensed', sans-serif; font-weight: 500; text-transform: uppercase; color: #999; color: rgba( 0, 0, 0, .25 ); display: block; margin-bottom: 10px; } #bsap_aplink:hover { color: #111; } #ad.dark #bsap_aplink { color: #555; color: rgba( 255, 255, 255, .25 ); } #ad.dark #bsap_aplink:hover { color: #fff; } body .one .bsa_it_ad, body .one .bsa_it_ad * { background-color: transparent !important; position: static !important; z-index: 1 !important; } body .one .bsa_it_ad { font-family: 'Noticia Text', serif; border: none; padding: 0; margin: 0; } body .one .bsa_it_ad .bsa_it_i, body .one .bsa_it_ad .bsa_it_t, body .one .bsa_it_ad .bsa_it_d { width: 100%; display: block; padding: 0; margin: 0; } body .one .bsa_it_ad .bsa_it_t, body .one .bsa_it_ad .bsa_it_d { font-size: 14px; line-height: 1.75; color: #555; color: rgba( 0, 0, 0, .75 ); } body .one .bsa_it_ad .bsa_it_i { margin-bottom: 10px; } body .one .bsa_it_ad .bsa_it_t { font-weight: 700; } #ad.dark .bsa_it_ad .bsa_it_t, #ad.dark .bsa_it_ad .bsa_it_d { color: #bbb; color: rgba( 255, 255, 255, .75 ); } body .one .bsa_it_p { display: none; } #ad-close { width: 10px; height: 10px; text-align: left; text-indent: -9999px; position: absolute; z-index: 1; top: 5px; right: 5px; } #ad-close:before, #ad-close:after { width: 2px; background-color: #666; content: ''; position: absolute; top: 0; bottom: 0; left: 50%; margin-left: -1px; } #ad.dark #ad-close:before, #ad.dark #ad-close:after { background-color: #999; } #ad-close:hover:before, #ad-close:hover:after { background-color: #111; } #ad.dark #ad-close:hover:before, #ad.dark #ad-close:hover:after { background-color: #fff; } #ad-close:before { -webkit-transform: rotate( 45deg ); -moz-transform: rotate( 45deg ); -ms-transform: rotate( 45deg ); -o-transform: rotate( 45deg ); transform: rotate( 45deg ); } #ad-close:after { -webkit-transform: rotate( -45deg ); -moz-transform: rotate( -45deg ); -ms-transform: rotate( -45deg ); -o-transform: rotate( -45deg ); transform: rotate( -45deg ); } /* META */ #meta { width: 100%; height: 40px; line-height: 1; background-color: #fff; background-color: rgba( 255, 255, 255, .5 ); overflow: hidden; position: fixed; z-index: 1001; bottom: 0; left: 0; padding: 10px 20px 0; } #meta.dark { background-color: #111; background-color: rgba( 0, 0, 0, .5 ); } #meta li { float: right; } #meta li:first-child { float: left; } #meta li:last-child { margin-right: 15px; -webkit-transition: opacity .3s ease; -moz-transition: opacity .3s ease; -ms-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease; } #meta:not(:hover) li:last-child { opacity: 0; } #back-to-article { font-family: 'Cabin Condensed', sans-serif; font-weight: 500; text-transform: uppercase; text-decoration: none; color: #111; float: left; position: relative; bottom: -2px; } #back-to-article:before { width: 0; height: 0; display: inline-block; border: 5px solid transparent; border-left: none; border-right-color: #111; border-right-color: rgba( 0, 0, 0, .5 ); content: ''; margin-right: 5px; } #back-to-article:hover:before { border-right-color: #111; } #meta.dark #back-to-article { color: #fff; } #meta.dark #back-to-article:before { border-right-color: #fff; border-right-color: rgba( 255, 255, 255, .5 ); } #meta.dark #back-to-article:hover:before { border-right-color: #fff; } /* RESPONSIVENESS */ @media screen and (max-width: 40em), screen and (max-height: 40em) /* 640 */ { #ad, #meta { display: none; } } html { height: 100%; } body { min-height: 100%; font-family: 'Advent Pro', sans-serif; font-weight: 500; background-color: #c3d5d3; padding: 3.75em 1.875em; /* 60 30 */ } strong { font-weight: 700; } #wrapper { width: 30em; /* 480 */ height: 8.75em; /* 140 */ position: absolute; top: 50%; left: 50%; margin: -4.375em 0 0 -15em; /* 70 240 */ } h1 { font-family: 'Advent Pro', sans-serif; font-size: 1.688em; /* 27 */ font-weight: 500; text-align: center; margin-bottom: 0.741em; /* 20 */ } h1, h1 a, #copyright, #copyright a { color: #fff; text-shadow: 1px 1px 0 rgba( 0, 0, 0, .1 ); } h1 a, #copyright a { -webkit-transition: text-shadow .25s ease; -moz-transition: text-shadow .25s ease; -ms-transition: text-shadow .25s ease; -o-transition: text-shadow .25s ease; transition: text-shadow .25s ease; } h1 a:hover, h1 a:focus, #copyright a:hover, #copyright a:focus { color: #fff; text-shadow: 1px 1px 0 rgba( 0, 0, 0, .3 ); } h1 em { font-family: Baskerville, serif; } #copyright { font-size: 0.875em; /* 14 */ text-align: center; margin-top: 1.429em; /* 20 */ } #copyright a { font-weight: 700; } /* PLAYER */ .audioplayer { height: 2.5em; /* 40 */ color: #fff; text-shadow: 1px 1px 0 #000; border: 1px solid #222; position: relative; z-index: 1; background: #333; } /* mini mode (fallback) */ .audioplayer-mini { width: 2.5em; /* 40 */ margin: 0 auto; } /* player elements: play/pause and volume buttons, played/duration timers, progress bar of loaded/played */ .audioplayer > div { position: absolute; } /* play/pause button */ .audioplayer-playpause { width: 2.5em; /* 40 */ height: 100%; text-align: left; text-indent: -9999px; cursor: pointer; z-index: 2; top: 0; left: 0; } .audioplayer:not(.audioplayer-mini) .audioplayer-playpause { border-right: 1px solid #555; border-right-color: rgba( 255, 255, 255, .1 ); } .audioplayer-mini .audioplayer-playpause { width: 100%; } .audioplayer-playpause:hover, .audioplayer-playpause:focus { background-color: #222; } .audioplayer-playpause a { display: block; } .audioplayer-stopped .audioplayer-playpause a { width: 0; height: 0; border: 0.5em solid transparent; /* 8 */ border-right: none; border-left-color: #fff; content: ''; position: absolute; top: 50%; left: 50%; margin: -0.5em 0 0 -0.25em; /* 8 4 */ } .audioplayer-playing .audioplayer-playpause a { width: 0.75em; /* 12 */ height: 0.75em; /* 12 */ position: absolute; top: 50%; left: 50%; margin: -0.375em 0 0 -0.375em; /* 6 */ } .audioplayer-playing .audioplayer-playpause a:before, .audioplayer-playing .audioplayer-playpause a:after { width: 40%; height: 100%; background-color: #fff; content: ''; position: absolute; top: 0; } .audioplayer-playing .audioplayer-playpause a:before { left: 0; } .audioplayer-playing .audioplayer-playpause a:after { right: 0; } /* timers */ .audioplayer-time { width: 4.375em; /* 70 */ height: 100%; line-height: 2.375em; /* 38 */ text-align: center; z-index: 2; top: 0; } .audioplayer-time-current { border-left: 1px solid #111; border-left-color: rgba( 0, 0, 0, .25 ); left: 2.5em; /* 40 */ } .audioplayer-time-duration { border-right: 1px solid #555; border-right-color: rgba( 255, 255, 255, .1 ); right: 2.5em; /* 40 */ } .audioplayer-novolume .audioplayer-time-duration { border-right: 0; right: 0; } /* progress bar of loaded/played */ .audioplayer-bar { height: 0.875em; /* 14 */ backgrou.........完整代码请登录后点击上方下载按钮下载查看
网友评论0